Menu
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?
307
Open the Settings app. Scroll down and tap Safari. Scroll down to the Tabs section and locate the option to switch between the Tab Bar and a Single Tab. Select Single Tab to move the Address Bar back to the top of the screen, or select Tab Bar to move it back to the bottom if you change your mind later on.
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)
169
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
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
