Bug Report: Drawer behaves inconsistently on Chrome for iOS

[mannoeu]

Description:

When using the Drawer component from the vaul library, it behaves unexpectedly on Chrome for iOS devices. The same drawer works perfectly fine on Safari for iOS. The issue seems to be specific to Chrome, as inputs and other interactive elements inside the drawer either don't respond correctly or cause layout shifts.

iPhone.15.v17.6.-.Google.Chrome.2024-11-12.21-23-07.mp4

Expected Behavior:

The Drawer should function consistently across different browsers on iOS, including Chrome, just as it does on Safari. Inputs should be fully functional, and the drawer should maintain its layout without any strange behavior.

Current Behavior:

On Chrome for iOS, focusing on inputs inside the drawer causes unexpected scrolling or layout issues.
The drawer sometimes shifts position, becomes unresponsive, or behaves inconsistently when interacting with form elements.

Environment:

Device: iPhone 11 and 14 (iOS 16 and 17)
Browser: Chrome for iOS (92.0.4515.90 and 131.0.6778.73)
vaul Version: ^1.1.1
React Version: ^18.3.1

Steps to Reproduce:

Open the Chrome browser on an iPhone.
Navigate to a page that uses the Drawer component.
Drawer should be contain one Input/button.
Open the drawer and try interacting with any inputs inside it.
Observe the unexpected behavior.

Additional Context:

The issue does not occur on Safari for iOS, where the drawer and its contents work as expected. This suggests that it might be a Chrome-specific compatibility issue related to how it handles inputs within fixed elements.

When the input contains the defined inputMode attribute, this does not happen

Would appreciate any guidance or fixes for this issue. Thank you!

[dnntung]

Same here, but on safari (iOS 17.5.1)

[gonzalochale]

Any updates?

[Junk-debug]

try setting repositionInputs={false} to the Drawer.Root this helped for me

[gonzalochale]

Yeah, I just tried it, and it fixed the misalignment in Chrome, thanks! It’s still not perfect in Safari, but I think I’ll stick with it for now while waiting for a proper fix.

[Junk-debug]

for me worked on safari too

Simulator.Screen.Recording.-.iPhone.16.Plus.-.2024-11-19.at.14.03.13.mp4

this is an xcode ios simulation but on real iphone works too(tested)

[Junk-debug]

probably this is the same issue