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

#css #ios

<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.