Bug 281063 – REGRESSION: viewport height incorrectly excludes navigation bar after client side navigation

• Status: NEW
• Component: Layout and Rendering

[Clara]

Created attachment 472859 [details]
Screenshot of the incorrectly displayed page on iOS 17.5 (working) and iOS 18 (broken)

On Safari 18 after navigation (via client side routing) from a page where the user has scrolled causing the browser navigation bar to minimize, pages display incorrectly since the navigation bar is no longer minimized but the `window.innerHeight` value does not reflect this and elements with `position: fixed; bottom: 0;` are hidden by the navigation bar. When the user scrolls, the issue corrects itself.

The bug is visible on all websites with fixed footers that allow scrolling and use client side routing, including https://m.youtube.com/

I've created a minimal web app to reproduce the issue 

Link to app: https://viewport-bug-repro.web.app 
Code sandbox: Code sandbox: https://codesandbox.io/p/devbox/falling-moon-cc2zrp

Repro steps:

1. Go to the app on Safari using a device running iOS 18 or later
2. On the first page, scroll down until the navigation bar at the bottom of Safari is minimized + click on a "Continue" button

Expected behaviour - this behaviour is seen on devices running iOS versions prior to iOS 18.

- The browser navigation bar stops being minimized after navigation
- The `window.innerHeight` value displayed is correct and takes the now displayed browser navigation bar into account. Elements with height `100dvh` (the main page element) take up exactly the available height of the viewport and elements with `position: fixed; bottom: 0;` appear at the bottom of the visible screen (above the navigation bar)
- The "Go back" button in the footer is visible and fixed to the bottom of the screen
- Scroll interaction from the user does not permanently change the layout or `window.innerHeight` value

Actual behaviour - this behaviour is seen on devices running iOS versions 18.0.0+

- The browser navigation bar stops being minimized after navigation
- The `window.innerHeight` value displayed is incorrect, as it ignores the no longer minimized browser navigation bar. Elements with height `100dvh` (the main page element) take up more than the available height of the viewport and elements with `position: fixed; bottom: 0;` appear below the bottom of the visible screen (hidden by the navigation bar)
- The "Go back" button in the footer is hidden behind the browser navigation bar
- Scroll interaction from the user causes the `window.innerHeight` value to permanently update to the correct value, after interaction elements with height `100dvh` take up the correct available height and the "Go back" button moves to the correct location at the bottom of the viewport.

See attached screenshot of the result of following the repro steps using a simulator on iOS 17.5 (working) and iOS 18 (broken)

[Radar WebKit Bug Importer]

<rdar://problem/137517958>

[Vladimir]

I installed the iOS 18.2 beta and noticed that this bug seems resolved—elements now correctly consider the navigation bar's height without user scroll interaction. However, I didn’t find any mention of this in the 18.2 release notes. Could anyone confirm if this fix is officially included in 18.2 or share more details on its status?

[Michał Zalewski]

We have the same problem in our web application. I checked today on iOS 18.2 (stable) and now everything works correctly.