Prevent iOS 11.3 overflow bouncing

Question

I've been making use of the preventDefault technique on the touchmove event since now, when I noticed it doesn't seem to work anymore on iOS 11.3, for neither Safari, nor Chrome or Firefox:

document.ontouchmove = function(event){
    event.preventDefault();
}

Has anything changed now in iOS? What's the way of preventing the bouncing at the top or end of the page?

Reproduction online

Reproduction online with jQuery

Video here:

I've tested it from another phone (iphone 5S) with iOS 11.3 and I can not reproduce it. This is **pretty** weird... because I can reproduce it in mine (iphone 7) in all the named browsers, as well as in other iPhones. — Alvaro, Apr 23 '18 at 13:12

score 8 · Accepted Answer · edited May 24 '19 at 02:09

8

It was caused by a bug of WebKit. Bug 182521

Try

window.addEventListener("touchstart", function(event) {
  event.preventDefault();
}, {passive: false});

as a workaround.

edited May 24 '19 at 02:09

gman

100,619
31
269
393

answered Apr 27 '18 at 13:19

gluttony

446
4
3

I get "preventBouncing is not defined" – david_nash May 20 '19 at 06:09
5

This disabled the scrolling at all – Maxwell s.c Jul 17 '20 at 14:31

score 3 · Answer 2 · answered Jun 14 '18 at 11:35

3

In addition to gluttonys answer:

window.addEventListener("touchmove", function(event) {event.preventDefault();}, {passive: false} );

is for me a working solution for the safari bounce issue.

answered Jun 14 '18 at 11:35

Oliver Becker

161
1
8

Yeah, same thing. You can use a passive handler for the touchmove or touchstart and prevent it. – Alvaro Jun 15 '18 at 12:49
this works but also locks inside the modal too – Oğulcan Karayel May 07 '21 at 07:17

Prevent iOS 11.3 overflow bouncing

2 Answers2

Linked