iOS Chrome (and some Android browsers) auto-hide their URL bar on
scroll. This grows the visual viewport without changing the layout
viewport, so a position:fixed bar pinned to bottom:0 — which is
relative to the layout viewport — appears to float mid-screen with
a gap beneath it. Safari masks the bug because its toolbar shrinks
rather than fully retracting.
Track the delta between the visual and layout viewports via the
VisualViewport API and write it to a --mobile-bar-offset CSS var.
The bar uses translate3d to apply that offset, which both fixes the
gap and enables hardware compositing so it tracks the toolbar
animation without flicker.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Tudor Sitaru
a5be07ac0f