iOS 15 Safari new tab bar and notch background

iOS 15 Safari brings a new layout where the tab bar containing the URL, is positioned at the bottom as the new default position.

The new layout fills the screen portion above the top of the page with the page background colour, and when scrolling a page, this is also used to fill the top and bottom of the screen. As the page colour is often white, it may be worth considering how your site looks on these devices.

Setting the page BG to a contrasting colour is an easy way to benefit from using this new behaviour to frame the view on iOS 15 notched devices.

Here is a screenshot with the page BG set to white.

Here is the same view with the page BG set to red.

Note how the red background frames the page content when scrolling. IMHO this looks much better than a white area top and bottom.

PS I used a contrasting colour because the top of my pages uses an image, but if it was a solid colour, by matching the page BG to that colour, you can create what looks like the top of your page extending under the notch.

5 Likes

I hope there’s an option to have the tab bar back at the top?

Yes there is such an option for the iPhone user but as a web designer you should really design for both layouts.

1 Like

Thanks for the tip, Gary! Much nicer - I will be going through all my sites, updating as warranted.

and for those who don’t want the whims of a web designer to override and make the UI unreadable and potentially inaccessible for people with vision problems…

Think before you do this. I leave a website immediately that messes with the UI of my computer.

…. and on iOS

2 Likes

I believe the iOS Allow Website Tinting default state is on which allows the unaltered BG to display.

Of course, selecting a non white BG for any site needs careful selection, as it will affect readability of text on the BG. Using a BG for all sections avoids this as the page BG will not show.

It is much more of a problem on MacOS where the whole toolbar , menu and tabs can become unreadable for people with reduced vision or those with taste 😉

I’m confused here and unable to test this on a version of MacOS that supports the option you mention.

Are you saying that if a website has a page BG set to a colour, that the BG colour will be used for “the whole toolbar , menu and tabs”?

Safari 15 on MacOS latest

Yes, with all due respect your site looks like its prolapsed its insides all over my computer.
Pinned icons are screwed and everything is horrible to read. It was my mum who complained to me (not about your site of course) she thought her computer was broken.

Ii I recall correctly, it was your Mother’s suggestion in the first place to experiment with <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Out of politeness I agreed but only if she stopped wasting time buying more loader tractors.

1 Like

She needs them to move around framework code :)

Why its a bad idea:
View this page in iOS 15 safari with tinting turned on or MacOS 15 Safari with tab colour on
https://test.bigwhiteduck.com/stupiddiscotabs/

1 Like

Seems your ducks 🦆 are dancing 😄

The Weavers would love that if it was a available as a stack.

1 Like

YIKES! On second thought - I agree with the duck! Thanks, Tav. WTH is Apple thinking?

This is what happens when tech geeks write specs and corporate people need to implement something just so that they can have a new feature.

Another example is the CSS Tricks website which looks a total mess. Turn it off in Prefs and leave it off.

1 Like

I don’t find that too violently offensive and it seems to only manifest itself on the latest macOS Safari where as you pointed out, there is the option to turn it off, so that would seem to be the solution for the Fanboi visual snowflakes out there. The latest Catalina Safari 15 and below doesn’t exhibit this behaviour or have the additional Tab setting.

However, it is still an opportunity to add colour and make your site stand out if you want, so careful use of an appropriate color here is just another tool to use wisely or abuse.

For anyone who has set a non white page background colour, then it would be wise to check how it appears.

It’s also visible on Safari on iOS 14.8.

I don’t think having decent taste and not wanting my operating system UI to be hijacked by a website makes me a snowflake. Fanbois should have the option to turn it on rather than normal people having accessibility ravaged.

I suggest that normal people should add this code to all their pages to force people to turn it off - it deliberately inverts their dark mode / normal mode choices. Should a site be able to do this, I don’t think so, its not the end of the world but it is absolutely pointless and the domain of people who have run out of things on pornhub to get excited about.

<meta name="theme-color" content="#313131" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#f4f4f4" media="(prefers-color-scheme: dark)">