iOS: Overflowing elements flash on drawer close

[ParkerMJones]

Description of the issue

• iOS only: Elements that exist below the height of the screen, and that overflow off the page horizontally, will flash when the drawer is closed
• Sometimes on opening the drawer with these elements in view, the entire page will flash, and scroll position may be moved
• Tested on Safari, Chrome, and Firefox with same results in each
• Seems only to happen on real devices: the simulator behaves as expected (iPhone 15 Pro Max, iOS 17.2)
• On Android (Galaxy S22, Android 14) and desktop web (Mac M2 OS 14.4.1), the elements behave as expected with no flash (although sometimes scroll position of the page is recalculated on drawer opening on Android)

Vercel Deployment

Environment

• Remix 2.9.2
• vaul 0.9.1
• tested on: iPad (9th Gen) OS 17.4.1

Link to reproduction repository

Video Recording

RPReplay_Final1716923507.MP4

[hauseyo]

Facing the same issue on iPhone 11

[srkuleo]

Can confirm this, also happening on my PWA and Safari on Iphone 13. It also doesn't allow me to interact with buttons inside (remove, cancel), only Overlay. It also make a big layout shift on both opening and closing modal.

Like you said, only happening on real devices both in development and production, but doesn't affect desktop nor mobile device mode in DevTools.

I thought it has to do something with setting body position to fixed upon opening modals, but even with noBodyStyles it still occurs. The more I think about it probably it has to do something with locking the scroll behaviour because when I put modal prop to false, everything works fine but I don't think that should be the solution since it disables Overlay.

I hope fix comes soon, cuz Vaul is really big part of making my PWA UX native-like.

[AdytZZa22]

Facing the same issue on 13 Pro Max

[muhammadarsalanmanzoor]

facing same issue on some android and ios devices