Broken vertical auto-resizing on mobile devices

[bvanderdrift]

Notice: I realise this package is not maintained anymore, so this is rather a question for the community on how you deal with this bug

TL;DR: Auto-resizing is broken on some mobile devices due to this logic. Any alternatives you consider or workaround you work with?

Bug description

We have a basic component (styled through shadcn) such as:

<DrawerPortal data-slot="drawer-portal">
      <DrawerOverlay />
      <DrawerPrimitive.Content className="h-auto">
           <h1>Some header</h1>
           <p>Some text</p>
           {isShowing && <p>Some conditional message</p>}
           <button>Some action</button>
      </DrawerPrimitive.Content>
</DrawerPortal>

Cases

• closed -> open with isShowing: true: ✅ sized correctly in all cases
• closed -> open with isShowing: false: ✅ sized correctly in all cases
• open -> open with isShowing from false -> true:
  • desktop -> ✅ resized correctly
  • desktop chrome devtool mobile preview -> ✅ resized correctly
  • android chrome -> ❌ not resizing
  • iOS safari -> ❌ not resizing

Cause

Both on desktop & mobile these lines set height on element directly:

https://github.com/emilkowalski/vaul/blob/main/src/index.tsx#L514-L521

On desktop it's doing it post-rerender, but on mobile it seems to take before-rerender height. If I disable that height: ... in the chrome devtools on the mobile device the h-auto tailwind classes kicks in and the element is suddenly sized correctly. If I enable it again it goes back to broken state; proving it's specifically the height: ... that's breaking the UI.

Conclusion

As stated in the TL;DR, how do you all deal with this? I'm assuming more people have this issue?

[iSaulX]

Hey! Hope I found you well.
I don't think this an issue with the component itself.
You're using h-autowhich makes the browser calculate the height based on the current content, if you want to change the drawer height based on content that dynamically changes, you can use h-fit, which makes the browser calculate the height based on the current elements.

className="h-fit"

Note: This is gonna make the browser change between height aggressively with no transitions, if you want something smoothly, you can play with .getComputedStyle() and change the height with transitions.