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

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