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

Question

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?

Malarkey

It should be distinguished by the swipe starting offscreen. Do you have an example webpage where a conflict occurs? – Speculation

@RupertRawnsley Add a touchstart/touchmove event to your web page with a console.log('FIRED!'); in it. Move your finger onto the web page from the edge and you will notice the event never fires. Am I right in assuming that this will be the new expected behavior? – Lunna

@Lunna That sounds like the expected behaviour. I suppose swipe events will only work if they start within some safety margin of the browser window. Technically this is understandable, but the user experience is going to be a bit confusing. The article Vinzzz links to in the answer below correctly points out this is not just a Safari issue. – Speculation

Has anything changed in regards to the history gesture in iOS8? Has anyone gotten a change to play around with it? – Cappello

I've filed an issue on Chromium: bugs.chromium.org/p/chromium/issues/detail?id=1033464 I know this is an issue that affects more than a single browser, and the question was about Safari, but we have to start somewhere. – Canice

You can now (since iOS 13.4): https://mcmap.net/q/244307/-is-there-a-a-way-to-disable-swipe-back-animation-in-safari-on-ios – Hillery

Answer 1

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)

Glaikit

Answer 2

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

Breathtaking

Yes but this prevents only the history in the app itself when navigating. Other apps may also have pushed a history, therefore iOS will detect those histories too. – Algetic

Answer 3

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

Century

I added this and on Mac, it does prevent a left swipe from triggering back. However, it breaks the back functionality completely (incl. the Back button), so it can’t be used as a workaround. – Lowering

In my case that was the goal as I was building a single page app – Century

But it’s still possible that someone opens your app by clicking on a link on another website (i.e., if that site links to your app). To fix this, you’d still have to detect swipe gestures via touchmove events and only execute the above code if it wasn’t immediately preceded by a swipe. It should be possible. – Lowering

I've updated this to include a CSS only option for Chrome and Firefox – Century

Are you sure this works on iOS? I've just tested overscroll-behavior-x: none; on Chrome on iOS 13 and it had no effect to the swipe-navigation behaviour. Swiping right at the left edge goes back (and even if this is the first page in tab history, it still goes back to the home screen). – Canice

@Canice on iOS is everything Safari under the hood so it won't work on it. – Misusage

Answer 4

If no history then no swipe.

document.body.addEventListener('click', function(evt) {
  const a = evt.target.closest('a:not([href^="#"])');
    
  if (!a) { return; }

  evt.preventDefault(); 
  history.replaceState({ }, '', a.href);
  location.reload();
});

Cameleer

Answer 5

The following works in iOS 16:

window.addEventListener('touchstart', e => e.preventDefault(), { passive: false })

passive flag is important!

I found that it also disables magnifying glass oh hover, maybe other Safari-specific events too.

Edit: this listener breaks other onclick event listeners from working...

Dixiedixieland