Is there a a way to disable swipe back animation in Safari on iOS?

7
votes

I would like to disable the swipe back animation totally on a SPA. That would allow me to use some swiping gestures within the SPA. At the moment on iOS you tend to also trigger the swipe back gesture when triggering certain gestures.

I have found this previous post about how to disable it: iOS 7 - is there a way to disable the swipe back and forward functionality in Safari?

They suggest following:

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);
    };
}

The problem is that it does not deactivate the swipe back animation on iOS, it just replaces the place you get redirected to. Is there a way to also disable the swipe back animation on iOS? If there is no way to do it, does that mean you can't really use any swiping gestures if you build a PWA if you plan to have iOS customers?

2
javascriptiosmobilemobile-safariswipe
Swipe-back is built-into Safari on iOS. The action is the same as the Back button. So the answer is probably to disable back-button functionality on your site or for the specific pages where you want to disable that feature. – daddygames

2 Answers

4
votes

In iOS 13.4+ you can now preventDefault() on the "touchstart" start event to stop the navigation action.

Let's say we have a <div class="block-swipe-nav"> on the page that spans the entire width of the viewport and we want to prevent swipe navigation on that element.

const element = document.querySelector('.block-swipe-nav');

element.addEventListener('touchstart', (e) => {

    // is not near edge of view, exit
    if (e.pageX > 10 && e.pageX < window.innerWidth - 10) return;

    // prevent swipe to navigate gesture
    e.preventDefault();
});

I've written a short article on blocking swipe with some additional information.

1
votes

By default, there is no way to disable the swipe-back gesture. Also when you open the URL in a new tab, the back-button and swipe-left gesture will redirect you to the previous page.

There is one way when you haven't a back button: When you open a new tab in Safari and go to the URL there's is no URL to go back...

I found a small hack to make this possible in code. When Safari doesn't find the referrer anymore, the back button will disappear and the back-gesture doesn't work anymore :)

Opening the new page in a new tab is the only thing you have to do with something like the following code behind:

<a href="https://yoururl.com/path" target="_blank" onclick="handleClick()">Click here to open</a>

function handleClick() {
  setTimeout(function () {
    window.location.href = '?changeThePath';
  }, 100);
}

You need to change the original URL and, but the user doesn't see it because the new page is loaded in a new tab :)