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’ll be able to see within the connected screenshots, the Safari tab bar background shade is being taken from the meta tag:
<meta identify="theme-color" content material="#0F172A" />
After I open a modal with background dimming, Safari nonetheless applies both the desired theme-color or makes it totally clear beneath the tab bar. This causes an inconsistent “patchy” look, as a result of the dimming layer from my modal doesn’t lengthen beneath the tab bar.
I additionally observed the identical conduct on different web sites (even on Official Apple Assist Group)
My questions:
Is there now any official methodology to dynamically management or replace the Safari tab bar background (as an alternative of relying solely on <meta identify="theme-color">)?
Can the dimming layer of the modal lengthen beneath the tab bar, or is it strictly managed by the meta tag shade?
Is there a beneficial solution to obtain a completely unified interface with out resorting to hacky workarounds?
Setup:
Gadget: iPhone 13 (iOS 26, Safari)
Internet app with floating buttons and modal dialogs
Thanks prematurely for any steering!
Demo:
screenshot with my web site
What I attempted:
I set the theme shade for all the internet 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 purported to cowl all the view-port behind the modal.
What I anticipated to occur:
I anticipated the modal’s dimming overlay to increase totally beneath the Safari tab bar, making a constant, darkened background throughout all the display screen, together with the realm beneath the tab bar. I assumed the tab bar would both grow to be 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 stable 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 stable shade begins. As an alternative of a seamless dimmed interface, the result’s a patchy look the place the tab bar appears 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.
