Layout shift when opening browser's search bar

[sidvishnoi]

Seen in new design implementation (#534) in Firefox.

Screencast.from.2025-09-01.18-53-50.webm

[Anca2022]

@sidvishnoi @JoblersTune
The layout shift seen in Firefox (and Safari) is caused by a combination of:

• min-height: 100vh being set on the html and hero section
• browser behavior — these browsers treat the search/find bar as part of the browser UI that reduces the viewport height, instead of overlaying it on top of the page.

I tried addressing our side of the issue using only CSS by replacing vh with the newer viewport units (svh, dvh, lvh). This improves the immediate resize behavior, but Firefox/Safari still perform a delayed viewport recomputation a few seconds later, which results in a delayed layout shift instead.

Screen.Recording.2026-05-29.at.16.08.18.mov

The remaining option would be a JS workaround that snapshots the viewport height into a CSS variable and only updates it on actual window resizes (e.g. width changes, while ignoring height-only changes). I’m hesitant to add extra resize listeners and viewport-management logic for a relatively minor browser-specific issue that only occurs during search bar interactions.

From my perspective, this falls more into browser behavior than an application bug, so I would lean toward leaving it as-is unless we specifically want to optimize for this scenario.

That said, if there are simpler solutions or approaches I’m not aware of, I’m more than happy to hear them.

Happy to implement the JS workaround if we decide it’s worth the added complexity. :)

[Anca2022]

PS: Google has the same issue 🤭 🤭

Screen.Recording.2026-05-29.at.16.59.30.mov

[JoblersTune]

This is not a current high priority task so we'll leave as is for now.