iOS 7 - is there a way to disable the swipe back and forward functionality in Safari?

IosSafariIos7

Ios Problem Overview


For some web pages we use the swipe left and right functionality of iPhone to pull up the menus. Now with iOS7, they have introduced the ability to go back and forward to previous and next pages of browser history on swipe left and right motions.

But is there a way to disable it for specific pages so as to not have conflicting behavior on the swipe actions?

Ios Solutions


Solution 1 - Ios

No, this is done at the OS level, and webpage doesn't get any callback

See this summary of safari changes in iOS7 that might cause problems to your website (including this swipe gesture)

Solution 2 - Ios

You can't disable it directly, but the native swipe back only happens if there is something in the browser history.

It won't work in every case, but if you have a single page web app opened in a new tab, you can prevent it from adding to the history by using

window.history.replaceState(null, null, "#" + url)

instead of pushState or

document.location.hash = url

Solution 3 - Ios

I had to use 2 approaches:

1) CSS only fix for Chrome/Firefox

html, body {
    overscroll-behavior-x: none;
}

2) JavaScript fix for Safari

if (window.safari) {
    history.pushState(null, null, location.href);
    window.onpopstate = function(event) {
        history.go(1);
    };
}

Over time, Safari will implement overscroll-behavior-x and we'll be able to remove the JS hack

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMeghaKView Question on Stackoverflow
Solution 1 - IosVinzzzView Answer on Stackoverflow
Solution 2 - IosTom ClarksonView Answer on Stackoverflow
Solution 3 - IosJohn DohertyView Answer on Stackoverflow