iOS 15 Safari floating address bar

Question

In iOS 15, Safari changes the behavior of the address bar. It floats somewhere near the bottom of the page.

This can greatly affect the design and user experience of the page.

Are there indicators to detect the address bar, know when it’s present and know its location?

Cohen

UPDATE: This is a moving target, Apple changed the behavior. The address bar no longer floats – Cohen

Answer 1

Webkit (and others) has released new units for better control of viewport height behaviour. https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/

The new Viewport Units are that solution:

• 100svh refers to 100% of the height of the smallest possible viewport.
• 100lvh refers to 100% of the height of the largest possible viewport.
• 100dvh refers to 100% of the dynamic viewport height — meaning the value will change as the user scrolls.

Histogram

Finally! Now we only need to be able to go fullscreen easily and hide the URL bar, when we want a fixed and overflow hidden (on the body) screen on iOS. – Rondelle

Seems like vh equals lvh. – Byroad

I know that it wasn't mentioned in the original question, but I think it's important to note that lvh, svh and dvh units do not account for the on-screen keyboard that appears, at least not in iPhone Safari 17 (latest version as of this comment). When the keyboard is activated via an input field on the page, the visual viewport shrinks, but the viewport units remain the same. – Prescriptive

Answer 2

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)

Loutish

This was a great session, but the discussion around safe-area-inset-bottom is all out of date now. It's worth looking at for the concepts but don't try to implement things as described. – Adowa

Why is that @Adowa – Waldman

@Waldman I don't remember the exact details, but it's either been renamed or they removed it (perhaps - and again I don't remember the details - because it caused conflicts or had performance issues). That session was recorded before the final spec was finished. – Adowa

Answer 3

A different solution to this issue (that works with 100vh) that I've had success with is:

min-height: 100vh; 
min-height: -webkit-fill-available;

Parole

This was the only thing that worked for me after hours of tinkering, so thank you so much for sharing! – Cuspid

Answer 4

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).

Adowa

Answer 5

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

Septuple

Safe areas include global stuff like statusbars, notches and iOS's ugly line at the bottom, but they don't include overlapping browser UI (in iOS 16). – Despairing

@GlennMaynard I wonder how env(safe-area-inset-bottom) is handled by non-WebKit browsers. Any idea if this is still a good idea to use? – Luedtke

It seems to be a widely-supported standard. – Septuple

Answer 6

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

Dymoke

Now in 2024 there are already new measures in CSS caniuse.com/?search=dvh – Dymoke

Answer 7

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.

Seif