Skip to content

[Bug]: Bottom sheet visible when closed on web at browser zoom levels below 100% #2639

@jspizziri

Description

@jspizziri

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

  1. In example/src/screens/basic/BasicExamples.tsx, change the BottomSheet index prop from 1 to -1:
    - index={1} + index={-1}
  2. Open in a web browser and set zoom to 50%
  • NOTE: I've primarly reproduced this in Chrome and other Chromium browsers.
  1. Make the height of the window "short"
  2. Run the example app on web and navigate to any Basic example (e.g., "FlatList")
  3. 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

Relevant log output

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions