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:

Jitterbug

FYI: Can‘t reproduce, iOS 11.3, Chrome, iPhone6s – Gulfweed

Mmmm... that's weird... I'll restart and see. – Jitterbug

Nop, I still can reproduce it. – Jitterbug

okay I tried with safari and I can reproduce – Gulfweed

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. – Jitterbug

Answer 1

It was caused by a bug of WebKit. Bug 182521

Try

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

as a workaround.

Thad

I get "preventBouncing is not defined" – Spleeny

This disabled the scrolling at all – Electromotor

Answer 2

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.

Grassland

Yeah, same thing. You can use a passive handler for the touchmove or touchstart and prevent it. – Jitterbug

this works but also locks inside the modal too – Irisirisa