34

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?

Nathan H
  • 48,033
  • 60
  • 165
  • 247

7 Answers7

38

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.

enter image description here

Ma Jerez
  • 4,887
  • 3
  • 23
  • 21
  • 1
    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. – Kurt Lagerbier May 15 '23 at 18:40
10

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)

ThdK
  • 9,916
  • 23
  • 74
  • 101
alexismorin
  • 787
  • 1
  • 6
  • 21
  • 4
    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. – Simon_Weaver Sep 09 '21 at 00:49
5

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).
Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
4

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

Steve Barnes
  • 79
  • 4
  • 2
    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). – Glenn Maynard Nov 13 '22 at 00:30
4

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;
Matt Coady
  • 3,418
  • 5
  • 38
  • 63
  • 1
    This was the only thing that worked for me after hours of tinkering, so thank you so much for sharing! – Alien Dec 20 '22 at 21:27
3

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

enter image description here

There is the sample: JavaScript es6 + css solution

Anthony Sychev
  • 151
  • 5
2

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.

tyirvine
  • 1,861
  • 1
  • 19
  • 29