I’m engaged on an internet app optimized for the brand new iOS "Liquid Glass" design in Safari
The issue happens when utilizing floating buttons + Safari tab bar along with my modal.
As you possibly can see within the hooked up screenshots, the Safari tab bar background shade is being taken from the meta tag:
<meta identify="theme-color" content material="#0F172A" />
Once I open a modal with background dimming, Safari nonetheless applies both the required theme-color or makes it absolutely clear underneath the tab bar. This causes an inconsistent “patchy” look, as a result of the dimming layer from my modal doesn’t prolong underneath the tab bar.
I additionally observed the identical conduct on different web sites (even on Official Apple Help Neighborhood)
My questions:
Is there now any official technique to dynamically management or replace the Safari tab bar background (as a substitute of relying solely on <meta identify="theme-color">)?
Can the dimming layer of the modal prolong underneath the tab bar, or is it strictly managed by the meta tag shade?
Is there a advisable strategy to obtain a completely unified interface with out resorting to hacky workarounds?
Setup:
System: iPhone 13 (iOS 26, Safari)
Internet app with floating buttons and modal dialogs
Thanks upfront for any steering!
Demo:
screenshot with my website
What I attempted:
I set the theme shade for the whole net app utilizing the tag. For the modal’s background dimming, I am utilizing a semi-transparent overlay (e.g., background-color: rgba(0, 0, 0, 0.5)) that’s speculated to cowl the whole view-port behind the modal.
What I anticipated to occur:
I anticipated the modal’s dimming overlay to increase absolutely beneath the Safari tab bar, making a constant, darkened background throughout the whole display, together with the realm underneath the tab bar. I assumed the tab bar would both turn into a part of the "doc" for the aim of overlays or would dynamically adapt its look to mix with the content material beneath it.
What truly resulted:
The Safari tab bar maintains a strong background shade derived from the static theme-color meta tag. This creates a stark, seen line the place my modal’s dimming layer ends and the tab bar’s strong shade begins. As a substitute of a seamless dimmed interface, the result’s a patchy look the place the tab bar appears to be like disconnected from the remainder of the app’s UI, as proven within the screenshot. This conduct is inconsistent with the immersive expertise I used to be aiming for.
