Issue with Safari tab bar background and modal dimming in iOS 26 (Liquid Glass design)
Hello,
I’m working on a web app optimized for the new iOS "Liquid Glass" design in Safari
The problem occurs when using floating buttons + Safari tab bar together with my modal.
As you can see in the attached screenshots, the Safari tab bar background color is being taken from the meta tag:
<meta name="theme-color" content="#0F172A" />
When I open a modal with background dimming, Safari still applies either the specified theme-color or makes it fully transparent under the tab bar. This causes an inconsistent “patchy” look, because the dimming layer from my modal does not extend under the tab bar.
I also noticed the same behavior on other websites (even on Official Apple Support Community)
My questions:
- Is there now any official method to dynamically control or update the Safari tab bar background (instead of relying only on <meta name="theme-color">)?
- Can the dimming layer of the modal extend under the tab bar, or is it strictly managed by the meta tag color?
- Is there a recommended way to achieve a fully unified interface without resorting to hacky workarounds?
Setup:
- Device: iPhone 13 (iOS 26, Safari)
- Web app with floating buttons and modal dialogs
Thanks in advance for any guidance!
Demo:
iPhone 13