Scroll flickering on iOS with Sheet.Scroller & inputs

[mleister97]

When the keyboard opens, the whole page is flickering when i try to scroll the content of the scroller. Is this related to pull request https://github.com/Temzasse/react-modal-sheet/pull/138?

Code:

<Sheet
  isOpen={true}
  disableDrag={true}
  detent="full-height"
  snapPoints={[0.75]}
  onClose={() => {}}
>
  <Sheet.Container>
    <Sheet.Content>
      <Sheet.Scroller >
        Some text & inputs
      </Sheet.Scroller>
    </Sheet.Content>
  </Sheet.Container>
</Sheet>

Please see the video

https://github.com/Temzasse/react-modal-sheet/assets/16700053/fe50a421-17e6-4436-88f5-9d310ecd9453

[mghdmi]

I have the same issue. when there is an input in the modal scroll is flickering

[AlexandrosGounis]

This is related to scroll-locking on iOS safari (see use-prevent-scroll#L104-L250), #138 proposes a flag so that we can opt-out For the most part, this library is meant for mobile, that's where we need sheets. I think we should do our best to support iOS safari and have more flexibility on mobile in general.

[Temzasse]

Body scroll locking can now be disabled with disableScrollLocking in v2.1.0. Hopefully that helps!

Keyboard related issues are something I need to find a good solution for and if you guys have any other suggestions those are warmly welcome 😊

[mleister97]

Many thanks, @Temzasse. I've tested it on different iOS devices, and it's working well.

• iPhone 12 Pro running iOS 16.7
• iPad Air running on iPadOS 16.3.1
• iPhone 13 mini running on iOS 16.1
• iPhone X running iOS 16.7

Solution

Update package.json from

"react-modal-sheet": "^2.0.0"

to

"react-modal-sheet": "^2.1.0"

<Sheet
  isOpen={true}
  disableDrag={true}
  detent="full-height"
  snapPoints={[0.75]}
  onClose={() => {}}
  disableScrollLocking={true} // add this one <----------
>
  <Sheet.Container>
    <Sheet.Content>
      <Sheet.Scroller >
        Some text & inputs
      </Sheet.Scroller>
    </Sheet.Content>
  </Sheet.Container>
</Sheet>