Bug 235888 - Unexpected body height when hiding Safari's navigation toolbar
Summary: Unexpected body height when hiding Safari's navigation toolbar
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 15
Hardware: iPhone / iPad iOS 15
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-01-31 04:24 PST by Christian Petrov
Modified: 2022-02-06 10:59 PST (History)
6 users (show)

See Also:


Attachments
Observed gap (46.66 KB, image/png)
2022-01-31 04:24 PST, Christian Petrov
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Christian Petrov 2022-01-31 04:24:00 PST
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.
Comment 1 Radar WebKit Bug Importer 2022-02-02 11:21:42 PST
<rdar://problem/88391817>
Comment 2 Smoley 2022-02-03 15:52:43 PST
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?
Comment 3 Christian Petrov 2022-02-06 10:59:57 PST
Thank you for the heads up, the issue indeed cannot be reproduced on the latest iOS 15.4 beta (19E5209h).