16

Swiping from the left and right edges of my iPad's Safari browser, moves between the currently open web pages. Is there any way to prevent it?

I have tried to add touchstart and touchmove handlers on the edge of the page that stopPropagation and preventDefault, but they seem to have no effect, nor does touch-action CSS.

A similar question was asked in 2014 with replies to the negative: iOS 7 - is there a way to disable the swipe back and forward functionality in Safari?

Is there a workround now in 2018?

4
  • 4
    I wouldn't recommend doing this. Disabling essential navigation actions in a browser will confuse users. May 3, 2018 at 13:48
  • 6
    My app is a single page app, that lets users move cards around on the screen. What confuses users is that the whole page moves if they start trying to move a card that's near the side of the screen. Android Chrome solves this by only allowing navigational swipes on the chrome bar. May 3, 2018 at 13:55
  • 1
    The solution for this would be providing a so-called safe area for the cards in the center of the screen, where they can be freely moved. May 3, 2018 at 13:57
  • 2
    It's one workround, but not very intuitive / pleasant for users. I also have a split screen mode where a splitter can be dragged about and also docked on either side of the screen. That works nicely everywhere but iOS Safari. Once docked it can't be moved because the touch events around the edge of the screen are lost and any attempt to move it results in swiping between web pages instead. May 3, 2018 at 14:01

6 Answers 6

11

In iOS 13.4+ you can now preventDefault on "touchstart"

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
  • 1
    In iOS 14 this will no longer prevent touch and drag down events anywhere within safari if browser is in fullscreen mode. It will always drag the browser out of fullscreen mode.
    – Johncl
    Oct 22, 2020 at 8:29
3

You can't, it's been a problem since the early days of iOS. They repeatedly drag their feet on powerful web app features, such as service workers and webgl.

The best you can do is what you should do for every browser, make the best experience you can using feature detection for every browser. Long gone are the days of making all sites look the same on every browser.

Use a sandwich if needed, allow side swipes on browsers that support it. There is no shame in disabling a small feature on a few browsers for the benefit of the rest of your users.

1
  • Not really feasible in case of games, charts or any advanced interaction that the user should be able to do anywhere on the screen. The main problem is that Apple and cie, do not view their browsers as anything else than a simple page viewer where the only activity of a user is to read text and check some pictures.
    – Kev
    Jan 13, 2020 at 11:41
3

Apple provided these guidelines after iOS9.

The guide lets you disable

  1. Scrolling

    function touchMove(event) {
      // Prevent scrolling on this element
      event.preventDefault();
      ...
    }
    
  2. Pinch and Zoom

    function gestureChange(event) {
      // Disable browser zoom
      event.preventDefault();
      ...
    }
    

You can identify a swipe gesture as follows:

  1. Begin gesture if you receive a touchstart event containing one target touch.
  2. Abort gesture if, at any time, you receive an event with >1 touches.
  3. Continue gesture if you receive a touchmove event mostly in the x-direction.
  4. Abort gesture if you receive a touchmove event mostly the y-direction.
  5. End gesture if you receive a touchend event.

The full guide is poster here.

Let me know if you need more help.

Nitin, Defuzed

3
  • 3
    I already know how to interpret swipe gestures from touch events. The problem is that at the edge of the screen the browser behavior is different. It navigates between pages and I have found no way to prevent it. May 3, 2018 at 15:39
  • 4
    @ᴇʟᴇvᴀтᴇ ... and you probably won't find a way that's not very hacky. Seems like a native browser functionality that you as a web developer can't control... thats just how this particular browser works. Best you could do is to provide a warning message of the behavior to users. I think your hands are tied
    – zgood
    May 3, 2018 at 15:47
  • 6
    Hmm, yes, it seems there's no way to prevent it. I wonder if Apple does this kind of thing purposely to make it harder for web apps to compete with App Store native apps. May 3, 2018 at 16:03
1

There appears to be no way to disable this functionality, so as a workround I've found that a deadzone of 24px on either side of the page seems to be enough to stop unintentional navigation.

Here is my CSS:

body {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 24px;
  right: 24px;
  background-color: #ccc;
}

Making the body position: fixed also stops Safari doing the annoying overscroll/bounce effect.

3
  • 1
    Interesting hack!
    – parreirat
    Jul 8, 2019 at 9:19
  • this doesn't work on iOS 13. Can still swipe from the left of the screen to trigger a back navigation. May 14, 2020 at 20:15
  • Yes, there seems no way to prevent the navigation. The point of this workround is to make it more obvious to users that the area to the side of the page is not part of the web app. May 15, 2020 at 15:52
0

Navigation on swipe gestures are possible if there is a navigation history. Swipe left is the "go back to the previous page in my navigation history".

So, if your app does not need a navigation history, which may be totally valid for a single screen game for example, then you can prevent the swipe issue by removing the navigation history.

For example, I have a single page application that uses only in-memory history, I don't synchronize with the browser (history / URL). So, the "swipes" have nowhere to go to and "fix" this problem.

That said, this is a work-around with its limitations that may not be good enough for your situation. (URL sharing is a basic thing in Internet)

It seems browsers vendors mission is to make web developers's life miserable with silly things like that.

7
  • This sounds interesting, but I don't completely understand how to implement it. Can you explain how to "remove the navigation history"? On my iPad the swipes go between the open tabs (which aren't under my control). Dec 13, 2019 at 15:58
  • Before I say anything, is your app online somewhere to check it out?
    – Kev
    Dec 13, 2019 at 16:04
  • No, I never ended up putting out into the world. (Or, at least, not yet). Dec 13, 2019 at 16:07
  • 2
    I saw your question from 2018..,referring to another of 2014. Well it's almost 2020 and still a problem. Without the details of your app situation, I can only talk about mine. We tested this in iphone 5S / ipad, with ios 12, and 13. Our SPA is a react app and I have removed the synchronization of the navigation with the browser history. I made my own router so I won't explain it here. But if you want an example, it would be the equivalent of using React Router "Memory Router". reacttraining.com/react-router/web/api/MemoryRouter
    – Kev
    Dec 13, 2019 at 16:14
  • 1
    Unfortunately, you cannot wipe the browser history. You can navigate through your app without adding to history, but if the user came to your site through another one, there will always be history. One option is to open your app in a popup if the history object if too long when arriving in your app.
    – pieroxy
    Apr 22, 2020 at 6:44
-1

Try this in the <body> tag:

onload='ontouchmove()="return(function(event) { event.preventDefault(); event.stopPropagation(); return(false); } );"'

I imagine there might be some side effects by not letting IOS know about moving but for SPW they're probably slight.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.