iOS 15 Safari floating address bar

Pad your webpage at the bottom using the environment variable safe-area-inset-bottom like so:

body {
    padding-bottom: env(safe-area-inset-bottom);
}

This session by Jen Simmons goes over how to deal with Safari's new address bar: https://developer.apple.com/videos/play/wwdc2021/10029/ (see from 16:44 min)

The floating tab bar is considered to be beyond the lower edge of the Safe Area. You can get the Safe Area’s inset from the viewport’s bottom in CSS using env(safe-area-inset-bottom).

More about supporting the Safe Area in WebKit: https://webkit.org/blog/7929/designing-websites-for-iphone-x

The behavior for this is changing a lot. I recommend adding a DIV like this to your page to play around:

<div style="background: red; color: white; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)">Hello!</div>

This will give you the word Hello! in a tight red box with the four safe margins applied. You'll see these margins wherever on the page this div is - you don't need to make it a footer or header. It's a very good aid to visualize what's going on.

As of Safari 15 current beta there is :

• No longer a floating address bar.
• No longer any value set for env(safe-area-inset-bottom) to avoid interfering with the bottom address bar.
• env(safe-area-inset-bottom) is set for the purpose of avoiding the home screen indicator bar.
• Setting 100vh for the height of your page will prevent the address bar appearing at all unless somebody clicks on the site name at the bottom of the screen.
• However, with 100vh it's possible for items to hide underneath the bottom bar at this time. I'm really hoping they'll fix this behavior to set the safe area.

So for the red box to actually appear to have any padding you must:

• Switch to 'Single Tab mode' (address bar at top) in Safari settings.
• Scroll the page up and down to make the address bar show and hide.
• Notice the box will have bottom padding only when the home screen indicator is visible (the white bar at the bottom of the screen).

You can use ObserveResize and Css for solve attaching absolute dom element on the bottom of your screen.

There is the sample: JavaScript es6 + css solution

So far you can't really detect the size of the address bar because the env(...) inset variable was cut in the final release. But! The address bar does affect positioning on the page.

I'm not exactly sure how it determines what elements to move, but page elements can react to it. For example, take a look at Twitter's navigation bar when viewing twitter.com on a mobile device.

If you want similar behaviour ⤵︎

1. Make a div with fixed positioning
2. Set it's bottom to 0

Be careful about setting height of the fixed div to 100vh as I think this squeezes it out of the address bar's reactive area.

Please, anyone, post comments and updates about this issue as it's changing frequently.