iOS 15 Safari detect floating address bar when keyboard is visible

Question

In Safari iOS15, by default, the address bar is pinned to the bottom of the viewport. As iOS 15 Safari floating address bar explains, you can use padding-bottom: env(safe-area-inset-bottom) to ensure content displays above it.

However, if the keyboard is visible, the env vars don't work, because the floating address bar is shown above the keyboard, and it clears the bottom of the viewport. This can cause some content to be hidden below it.

Here is a simple demo of the issue: https://pmusaraj.github.io/ios15-bottom-bar2.html

On iOS 14 and below or on iOS15 with Safari set to show the address bar at the top, you can see the submit button when the textarea is in focus. On default iOS15, you can't, because the viewport height returned by the device does not include the floating address bar.

Update: WebKit bug report at https://bugs.webkit.org/show_bug.cgi?id=229876

Abscise

Have you made any progress with this as I am also seeing a value of 0px for the safe-area-inset-bottom when the keyboad is open – Dominations

Maybe it's related with Known Issues of iOS 15 beta. Issue number 81676564. – Bullish

I may be missing the obvious, but what is the question being asked here? – Unplug

The question is: is there a way to detect that bottom-pinned floating address bar when the keyboard is vislbe? – Abscise

This is another great demo of the issue: pmusaraj.github.io/ios15-bottom-bar2.html – Trilbie

Answer 1

The closest solution I could find is to check for the presence of iOS 15 with navigator.userAgent:

console.log(navigator.userAgent.indexOf("iPhone OS 15") != -1)

However, the user can still change the tab bar location in settings back to the top.

The below screenshot is from testing it in the Xcode iPhone simulator and using the development tools in safari to inspect the browser

Bestead

I like it! But it doesn’t get us there as you say. Closer though! – Trilbie

Note that it seems to be fixed in iOS 15.1. I'm using the regex /(iPad; CPU|iPhone) OS 15_0/i in order to test only iOS 15.0 but also catch both iPhones and iPads. – Cynarra

@Bestead Thanks... By this we can get any version of OS and any kind of browser and that will help in future releases of Safari / iOS , so we can put CSS/JS for that part only. Thanks lot.... – Plowboy

Answer 2

This seems to have been fixed in iOS 15 developer beta 3.

Abscise

It is still broken in the production version, I think. See pmusaraj.github.io/ios15-bottom-bar2.html for another good example – Trilbie