There’s a 33-minute video (and resources) over on apple.com covering the upcoming Safari changes we saw in the WWDC keynote this year in much more detail. Look who’s got a little cameo in there:
Perhaps the most noticeable thing there in Safari 15 on iOS is URL bar at the bottom! Dave was speculating in our little Discord watch party that this probably fixes the weird issues with 100vh stuff on iOS. But I really just don’t know, we’ll have to see when it comes out and we can play with it. I’d guess the expectation is that, in order for us to do our own fixed-bottom-UI stuff, we’d be doing:
.bottom-nav {
position: fixed; /* maybe sticky is better if part of overall page layout? */
bottom: 100vh; /* fallback? */
bottom: calc(100vh - env(safe-area-inset-bottom)); /* new thing */
}On desktop, the most noticeable visual feature is probably the theme-color meta tags.
This isn’t even a brand new Apple-only thing. This is the same <meta> tag that Chrome’s Android app has used since 2014, so you might already be sporting it on your own site. The addition is that it supports media queries.
<meta name="theme-color"
content="#ecd96f"
media="(prefers-color-scheme: light)">
<meta name="theme-color"
content="#0b3e05"
media="(prefers-color-scheme: dark)">It’s great to see Safari get aspect-ratio and the new fancy color systems like lab() and lch() as well. Top-level await in JavaScript is great as it makes patterns like conditional imports easier.
I don’t think all this would satisfy Alex. We didn’t exactly get alternative browser engines on iOS or significant PWA enhancements (both of which would be really great to see). But I applaud it all—it’s good stuff. While I do think Google generally takes privacy more seriously than what general internet chatter would have to believe, it’s notable to compare each company’s newly-released features. If you’ll forgive a bit of cherry-picking, Google is working on FLoC, a technology very specifically designed to help targeted advertising. Apple is working on Private Relay, a technology very specifically to making web browsing untrackable.
I’ve been using the iOS 15 beta for a few days, and I’ve liked how Safari handles the viewport height for the most part. While the URL bar is in its normal state, the viewport extends to the bottom of the screen (and going past the safe area on devices with a notch). The viewport shrinks down to right above the URL bar when it becomes hidden.
This video might explain it better than I can.
Last Christmas, my wife got me a new Android phone with 6” display. On it, Android 11 featured Chrome serach bar at the bottom. Firefox for Android also has search bar at the bottom by default (although this can be changed).
I suspect it has something to do with larger screen sizes and top part of the screen not being as acessible on handheld devices (espacially when using single-hand).
If I were to do design prediction, I would say we should see even more movement from headers toward rich footers in the future.
Yeh, I feel another pattern Apple are using is the card from the bottom, which improves the thumb reach area.
The URL bar at the bottom really bugs me. It seems that Apple believes that Safari is the primary app in itself, not a gateway to other experiences on the web.
I see no reason to have the most accessible part of the screen reserved for interacting with the URL bar instead of it being available to websites, to make them easier to use.
Though the notch on their latest models already killed more than 44 CSS pixels of the bottom for interactive use, the new URL bar now demands twice that and does it always, not just until the user has scrolled down the page.
Am I the only one who thinks this actually makes the 100vh issues way more complicated? Ugh.
This is a big change too:
https://twitter.com/kevgski/status/1403754664160632835?s=12
This url bar on mobile is absolutely bad. What this means?
You have to fix all old project for one browser! Stupid
There are quite a few bugs. For example, interfaces where you have fixed cards or absolute cards will cause the env() of the tab bar to inexplicably double. -> https://codepen.io/paul3fa/pen/gOmBxxY try this on your phone in debug mode, ios15
Has there been more research on how to handle the new address bar?
I just had to fix this in one of my current project. It seems that using
bottom: env(safe-area-inset-bottom)worked out of the box for me, without the need forcalc.How do I get it to apply on Bottom address bar on Safari 15?
It should be default! But if not, 9to5Mac breaks down the steps which you can do with the Safari app open:
Alternatively, you can also change the iOS 15 address/search bar by heading to the Settings app > Safari > swipe down and choose “Tab Bar.”
Hope this helps!
Hi,
how can i disable the divider/border between the adressebar and the website? The divider/border appears only on iOS Safari. A few websites e.g. t3n.de does`t have it.
Best,
Florian
Safari 15 still has issues with 3d transform e.g:
transform: rotate3d(1, 0, 0, -60deg);
Or
-webkit-transform: rotate3d(1, 0, 0, -60deg)
it just not renders while any other browser can.
Also still issues with html5 video tags. Somehow IOS restrictions are applied for desktop too :”HTTP servers hosting media files for iOS must support byte-range requests”
Safari is becoming the IE of browsers …