e.preventDefault() does not work with safari in ios11.3 and later

[wen911119]

Do you want to request a feature or report a bug?
bug
What is the current behavior?
e.preventDefault() does not work with safari in ios11.3 and later
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
Reproduction link
https://codesandbox.io/s/rwmw5536np
Steps to reproduce
1.scroll the page in safari under ios11.3
2.scroll the page in safari beyond ios11.3
What is the expected behavior?
the page can not be scrolled
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React: ^16.4.2
browser: safari
OS: ios11.4.1

[philipp-spiess]

Hey @wen911119,

This is not an issue by React and is caused by the recent movement of browser vendors to improve performance on mobile devices. Some events (usually those that would fire when you scroll) are getting passive by default. Google has a great article about that if you want to know more: https://developers.google.com/web/updates/2017/01/scrolling-intervention

When an event is passive, you can not call preventDefault(). This way the browser can render the next frames for the scroll animation without having to wait for the JavaScript engine.

You can check out this comment of mine where I talk about a way to work around this by adding a native, non-passive listener: #9809 (comment)

I'm going to close this issue since we track support for passive event listeners in #6436 but feel free to follow up if you have more questions!