8000 fix(web-components/bottom-sheet): scrollable elements does not work with `variant="modal"` on Safari · Issue #483 · Tap30/web-components · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

fix(web-components/bottom-sheet): scrollable elements does not work with variant="modal" on Safari #483

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.

Sign up for GitHub

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

Jump to bottom
Open
saraparsa13 opened this issue May 14, 2025 · 0 comments
Open

fix(web-components/bottom-sheet): scrollable elements does not 94E2 work with variant="modal" on Safari #483

saraparsa13 opened this issue May 14, 2025 · 0 comments

Comments

@saraparsa13
Copy link
Contributor
saraparsa13 commented May 14, 2025 •
edited
Loading

Describe the bug:

When a <BottomSheet variant="modal"> contains any scrollable element in its body slot—for example, a <Pinwheel>—the inner element cannot be scrolled on Safari iOS. It appears that the body‑lock applied by the modal variant prevents touch‑scroll events from propagating to the scrollable child, leaving the pinwheel “stuck” at its initial position.

To Reproduce:

  1. Render a modal bottom‑sheet
  2. Add a scrollable element in the body slot (e.g. a pinwheel):
<BottomSheet variant="modal" open>
  <div slot={BottomSheetSlot.BODY}>
    <PinwheelGroup>
      <Pinwheel>
        <PinwheelItem value='item-1'>
           item 1
        </PinwheelItem>
        <PinwheelItem value='item-2'>
           item 2
        </TapPinwheelItem>
      <Pinwheel>
      <Pinwheel>
        <PinwheelItem value='item-3'>
           item 3
        </TapPinwheelItem>
        <PinwheelItem value='item-4'>
           item 4
        </PinwheelItem>
      <Pinwheel>
    </PinwheelGroup>
  </div>
</BottomSheet>
  1. Open the bottom‑sheet on Safari iOS.
  2. Attempt to scroll the pinwheel.

Expected behavior:

The pinwheel (or any other scrollable child) should scroll normally inside the modal bottom‑sheet.

Desktop (please complete the following information):

  • OS: macOS 14.4.1
  • Browser: Safari 17.4.1
  • @tapsioss/web-components: v0.12.2

Additional context:

  • The same component set works as expected on Chrome Android and in desktop browsers.
  • Replacing variant="modal" by variant="inline" restores scrolling on Safari iOS.
@saraparsa13 saraparsa13 changed the title fix(web-components/bottom-sheet): scrollable elements does not work with variant="inline" fix(web-components/bottom-sheet): scrollable elements does not work with variant="modal" May 14, 2025
@saraparsa13 saraparsa13 changed the title fix(web-components/bottom-sheet): scrollable elements does not work with variant="modal" fix(web-components/bottom-sheet): scrollable elements does not work with variant="modal" on Safari May 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@saraparsa13
0