28

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

Penar
  • 591
  • 5
  • 10
  • 1
    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 Sep 01 '21 at 13:31
  • 2
    Maybe it's related with [Known Issues of iOS 15 beta](https://developer.apple.com/documentation/ios-ipados-release-notes/ios-ipados-15-beta-release-notes). Issue number 81676564. – Łukasz Łabuński Sep 02 '21 at 19:08
  • I may be missing the obvious, but what is the question being asked here? – 2br-2b Sep 07 '21 at 17:08
  • The question is: is there a way to detect that bottom-pinned floating address bar when the keyboard is vislbe? – Penar Sep 07 '21 at 18:38
  • 1
    This is another great demo of the issue: https://pmusaraj.github.io/ios15-bottom-bar2.html – Tom Lehman Oct 09 '21 at 14:16

2 Answers2

8

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

Check the output in this screenshot

Knox
  • 413
  • 4
  • 9
  • I like it! But it doesn’t get us there as you say. Closer though! – Tom Lehman Oct 07 '21 at 12:40
  • 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. – curiousdannii Jan 20 '22 at 05:15
  • @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.... – Shurvir Mori Aug 15 '22 at 16:18
3

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

Penar
  • 591
  • 5
  • 10
  • 4
    It is still broken in the production version, I think. See https://pmusaraj.github.io/ios15-bottom-bar2.html for another good example – Tom Lehman Oct 09 '21 at 14:15