iOS Safari: scroll events pass through a View absolutely positioned over a ScrollView

[lyahdav]

Do you want to request a feature or report a bug? Bug

What is the current behavior? When a View is absolutely positioned over a (non-absolutely positioned) ScrollView, when you drag the View, it scrolls the ScrollView. In React Native nothing scrolls in this case.

React Native Web on iPhone X Simulator:

React Native on iPhone (via Expo/Appetize):

Glitch (React Native Web): https://quark-kale-1.glitch.me/ https://glitch.com/edit/#!/quark-kale-1?path=src/components/App/index.js:1:0 Expo (React Native): https://snack.expo.io/HJxWMGvtG

What is the expected behavior? ScrollView should not scroll in this case.

Environment (include versions). Did this work in previous versions?

• OS: iOS simulator 11.2 (verified on real iPhone X running iOS 11.2.6 too)
• Device: iPhone X simulator/real device
• Browser: Verified on iOS Safari / Chrome
• React Native for Web (version):
• React (version):

"dependencies": {
    "create-react-app": "^1.5.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-native-web": "^0.5.1"
  },

[necolas]

I probably won't get around to looking into this soon. It would be helpful if you could debug the issue and determine the difference in how events are dispatched between platforms

[lyahdav]

I didn't have time to look into the root cause, but I suspect this isn't related to React Native Web, but just how CSS works. I think something like this could fix it, but it wasn't clear to me how to apply that to React Native Web code.

Instead I went a different route to workaround this issue: I make sure that when my absolutely positioned element is on screen that the ScrollView behind it is sized so that it doesn't flow behind the absolutely positioned element. Here's a Glitch with the workaround: https://abounding-slayer.glitch.me/ https://glitch.com/edit/#!/abounding-slayer?path=src/components/App/index.js:55:12

[necolas]

Was this only an issue for iOS?

[lyahdav]

Yes, iOS only.

[necolas]

Closing this old issue. If the behavior is still present, it's probably just what Safari does. But feel free to resurrect this issue if needed