[Webkit-unassigned] [Bug 281063] New: REGRESSION: viewport height incorrectly excludes navigation bar after client side navigation

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=281063

            Bug ID: 281063
           Summary: REGRESSION: viewport height incorrectly excludes
                    navigation bar after client side navigation
           Product: WebKit
           Version: Safari 18
          Hardware: iPhone / iPad
               URL: https://viewport-bug-repro.web.app/
                OS: iOS 18
            Status: NEW
          Severity: Normal
          Priority: P1
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: 03verbs_tapir at icloud.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 472859

  --> https://bugs.webkit.org/attachment.cgi?id=472859&action=review

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)

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20241008/c250b21b/attachment.htm>