Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
lyahdav opened this issue Mar 14, 2018 · 5 comments
Labels
bug needs: help project:react-native-web Issue associated with react-native-web

Comments

@lyahdav
Copy link
Contributor

lyahdav commented Mar 14, 2018

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:
iphonexsimulator

React Native on iPhone (via Expo/Appetize):
expo

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
Copy link
Owner

necolas commented Mar 16, 2018

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
Copy link
Contributor Author

lyahdav commented Mar 19, 2018

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 necolas added the needs: more information Issue is missing actionable information label Mar 19, 2018
@necolas
Copy link
Owner

necolas commented May 18, 2018

Was this only an issue for iOS?

@lyahdav
Copy link
Contributor Author

lyahdav commented May 23, 2018

Yes, iOS only.

@necolas necolas added bug needs: help and removed needs: more information Issue is missing actionable information labels May 23, 2018
@necolas necolas changed the title Absolutely positioned View does not capture drag event when a ScrollView is underneath it iOS Safari: scroll events pass through a View absolutely positioned over a ScrollView May 23, 2018
@necolas necolas added this to the Hooks milestone Nov 26, 2019
@necolas necolas removed this from the 0.13 milestone Oct 27, 2020
@necolas necolas added the project:react-native-web Issue associated with react-native-web label Jul 2, 2022
@necolas
Copy link
Owner

necolas commented Apr 13, 2023

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

@necolas necolas closed this as completed Apr 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug needs: help project:react-native-web Issue associated with react-native-web
Projects
None yet
Development

No branches or pull requests

2 participants