[Webkit-unassigned] [Bug 235888] New: Unexpected body height when hiding Safari's navigation toolbar

[bugzilla-daemon at webkit.org]

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

            Bug ID: 235888
           Summary: Unexpected body height when hiding Safari's navigation
                    toolbar
           Product: WebKit
           Version: Safari 15
          Hardware: iPhone / iPad
                OS: iOS 15
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: christian.petrov9 at gmail.com

Created attachment 450403

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

Observed gap

# Observed behavior

Safari's navigation toolbar can be hidden in two ways: by pressing Aa -> Hide Toolbar (1) or by scrolling up overflowing content (2). When Safari's navigation toolbar had been hidden due to scrolling up (2) and one shortens the overflowing content so that it does not overflow anymore, the page body will be resized, but in such way that a gap is left between the body and Safari's navigation toolbar. Elements positioned by `position: fixed; bottom: x px;` will also placed along this gap.

When Safari's navigation toolbar had been hidden by (1), the body and elements with `position: fixed; bottom: 0px` will be adjacent to Safari's navigation toolbar as expected after shortening the overflowing content.

# Expected behavior

Elements with 100% body height or `position: fixed; bottom: 0px` must always be adjacent to Safari's toolbar, never leaving any gaps. 

# Steps to reproduce the issue

The issue can be reproduced in the following snippet: https://cpetrov.github.io/safari-navigation-ui-scroll-gap/, source: https://github.com/cpetrov/safari-navigation-ui-scroll-gap/blob/gh-pages/index.html

1) Navigate to https://cpetrov.github.io/safari-navigation-ui-scroll-gap/ in Safari 15.2 on an iPhone.
2) Scroll down so that the navigation toolbar hides.
3) Tap on the "Make unscrollable" button, which will shorten the page content so that it does not overflow anymore.
4) Observe gap between `#body-height-indicator` and Safari's toolbar (see attached screenshot). Note that the button, which is positioned by `position: fixed; bottom: 0px;`, will also be adjacent to the gap instead of to Safari's toolbar.

Note that no gap will appear if at step 2) the navigation bar had been hidden by tapping Aa -> Hide Toolbar (1) instead of by scrolling (2) -- independent from the scroll position the toolbar has been hidden at.

# Practical relevance

This issue hinders the implementation of a navigation UI with bottom fixed positioning that navigates between scrollable and non-scrollable content, as such navigation UI would unpleasantly jump during the navigation.

-- 
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/20220131/422211d2/attachment.htm>