-
- Notifications
You must be signed in to change notification settings - Fork 941
Description
Version
v5.2.8
Reanimated Version
v3
Gesture Handler Version
v2
Platforms
Web
What happened?
When a BottomSheet with index={-1} (closed) is rendered on web, the sheet can become partially visible at the bottom of the screen when the browser zoom is below 100%.
Cause
INITIAL_POSITION is set to Dimensions.get('screen').height (screen.height), which represents the display's physical resolution in CSS pixels and does not account for browser zoom. At zoom levels below 100%, the CSS pixel viewport (window.innerHeight) can exceed screen.height. The sheet is positioned at translateY(INITIAL_POSITION), which is no longer off-screen.
The issue is more likely to manifest when the BottomSheet's container does not fill the full viewport (e.g., due to a navigation header or other layout elements), but it can occur in any layout where the viewport exceeds screen.height.
Additionally, when the sheet is closed and the container resizes (e.g., window resize), the closed position is not updated, leaving the sheet partially visible if the container grows beyond the current translateY value.
Demo Video
You can see this in the attached screen recording using the example apps FlatList example with index={-1}. Upon navigating to the example the sheet should be closed and it should never be visible. This largely works at zoom=100% (including on window resize). However, zooms < 100% will cause the bottom sheet to become visible.
bottom-sheet-zoom-issue.mp4
Reproduction steps
- In
example/src/screens/basic/BasicExamples.tsx, change the BottomSheetindexprop from1to-1:- index={1} + index={-1}
- Open in a web browser and set zoom to 50%
- NOTE: I've primarly reproduced this in Chrome and other Chromium browsers.
- Make the height of the window "short"
- Run the example app on web and navigate to any Basic example (e.g., "FlatList")
- The bottom sheet handle/content is visible at the bottom of the screen despite index={-1}
Reproduction sample
https://snack.expo.dev/@jspizziri-5stones/bottom-sheet---zoom-with-visible-bottom-sheet