DEV Community

nishinoshake
nishinoshake

Posted on

A Hack to Make the Safari Tab Bar Solid Color on iOS 26.0


<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>
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
chrisspiegl profile image
Chris Spiegl

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 fixed or absolute background will work again to also cover these areas.

So it all can look pretty and almost app like.

Collapse
 
nishinoshake profile image
nishinoshake

Hopefully Apple provides an official way to handle that strange background issue.

Collapse
 
lifeisbeautifu1 profile image
Alexey Poltoradnev

You are life saver. Thank you so much!!!

Collapse
 
nishinoshake profile image
nishinoshake

Glad it was useful! Thanks for the kind words.