<div class="veil" aria-hidden="true">
<div class="veil-overlay"></div>
</div>
<style>
.veil {
display: none;
}
@supports (-webkit-touch-callout: none) {
.veil {
position: sticky;
top: 0;
z-index: 10000;
display: block;
pointer-events: none;
}
.veil-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
backdrop-filter: blur(1px);
}
}
</style>
While inspecting Apple’s official iPhone page, I noticed that its Safari tab bar appeared as a solid color — unlike most sites where Safari’s tab bar appears transparent on iOS 26.
After some digging and experimentation, I managed to reproduce that behavior.
You can simply copy and paste the code above, and your tab bar should turn solid as well.
It seems that Safari takes the body’s background color as a reference for the tab bar color.
Ideally, it would update dynamically, but changing the body’s background via JavaScript doesn’t update the tab bar once it’s rendered.
As for why this works — that’s just a guess: maybe Safari struggles to render a blurred layer behind a glass surface, and this combination somehow forces it to flatten the backdrop into a solid fill.
It’s quite a wicked hack, so be aware of possible side effects.
Let’s hope iOS 26.1 makes such workarounds unnecessary.

Top comments (4)
Quite the strange thing (and even stranger that Apple themselves apparently don't have a great way of working with it.
I really hope this get's fixed and a regular
fixedorabsolutebackground will work again to also cover these areas.So it all can look pretty and almost
app like.Hopefully Apple provides an official way to handle that strange background issue.
You are life saver. Thank you so much!!!
Glad it was useful! Thanks for the kind words.