Input at bottom of screen gets hidden behind collapsed toolbar

• Component: CSS
• Status: NEW ---

[Robert Wünsch]

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

[Robert Wünsch]

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.

[Radar WebKit Bug Importer]

<rdar://problem/83644452>