Bug 230579 - Input at bottom of screen gets hidden behind collapsed toolbar
Summary: Input at bottom of screen gets hidden behind collapsed toolbar
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: iPhone / iPad Other
: P2 Critical
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-09-21 15:43 PDT by Robert Wünsch
Modified: 2021-09-28 15:44 PDT (History)
5 users (show)

See Also:


Attachments
Measured heights and distances of toolbar and unexpected white-space. (238.71 KB, image/png)
2021-09-21 15:43 PDT, Robert Wünsch
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Robert Wünsch 2021-09-21 15:43:13 PDT
Created attachment 438871 [details]
Measured heights and distances of toolbar and unexpected white-space.

With iOS 15.0 (19A346) Safari *with address bar at the bottom* introduces the following behavior:

- When an input is within an area of 50px height at the bottom of the screen it will be *hidden* behind the collapsed bottom toolbar when focused.
- When an input is within an area of 50 to 99px of the bottom of the screen it will be *cropped* by the collapsed bottom toolbar when focused.

The 50px is true for notched devices like the iPhone 12, on smaller screens like the iPhone SE 1st Gen it the area is 22px instead of 50px.

This does not happen if the address bar is set to be at the top of the screen.

Also, you can scroll 78px beyond the bottom which is the height of the full toolbar (128px) minus the collapsed toolbar (50px). These 78px are uncontrollable space. They are inaccessible via CSS – for example you cannot place something in that space via "position:fixed + bottom: 0". And the inspector does not state any measures about that area.

Demo: https://codepen.io/widescape/full/XWgYqMZ

Related? https://bugs.webkit.org/show_bug.cgi?id=217754
Comment 1 Robert Wünsch 2021-09-21 15:50:17 PDT
Reason for importance: Issue affects these services:
- Chat input at https://web.telegram.org
- Search input at https://maps.google.com – scroll down to the bottom after tapping the search input – possibly low importance here.
Comment 2 Radar WebKit Bug Importer 2021-09-28 15:44:17 PDT
<rdar://problem/83644452>