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.
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.
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…
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 😉
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.
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.
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.
