Unexpected body height when hiding Safari's navigation toolbar

• Component: CSS
• Status: RESOLVED FIXED

[Christian Petrov]

Created attachment 450403 [details]
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.

[Radar WebKit Bug Importer]

<rdar://problem/88391817>

[Smoley]

Thanks for filing, I am not able to reproduce this on the latest iOS
iOS 15.4 beta (19E5209h). When I tap the Make Unscrollable button, the bottom toolbar unhides and there is no gap. Are you able to reproduce this on that build?

[Christian Petrov]

Thank you for the heads up, the issue indeed cannot be reproduced on the latest iOS 15.4 beta (19E5209h).