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

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 — andy_roddam
– andy_roddam, Commented Sep 1, 2021 at 13:31
Maybe it's related with Known Issues of iOS 15 beta. Issue number 81676564. — Łukasz Łabuński
– Łukasz Łabuński, Commented Sep 2, 2021 at 19:08
I may be missing the obvious, but what is the question being asked here? — 2br-2b
– 2br-2b, Commented Sep 7, 2021 at 17:08
The question is: is there a way to detect that bottom-pinned floating address bar when the keyboard is vislbe? — Penar
– Penar, Commented Sep 7, 2021 at 18:38
This is another great demo of the issue: pmusaraj.github.io/ios15-bottom-bar2.html — Tom Lehman
– Tom Lehman, Commented Oct 9, 2021 at 14:16

Knox · Accepted Answer · 2021-10-06 21:33:56Z

8

+125

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

edited Oct 6, 2021 at 21:33

answered Oct 6, 2021 at 21:25

Knox

4524 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tom Lehman Over a year ago

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

curiousdannii Over a year ago

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.

Shurvir Mori Over a year ago

@Knox 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....

Penar · Accepted Answer · 2021-10-09 14:07:26Z

3

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

answered Oct 9, 2021 at 14:07

Penar

6016 silver badges10 bronze badges

1 Comment

Tom Lehman Over a year ago

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

Collectives™ on Stack Overflow

iOS 15 Safari detect floating address bar when keyboard is visible

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related