Bug 301756 – Clarification: Top bar tint in Safari is derived from page background

• Status: NEW
• Component: Layout and Rendering

Created attachment 477244 [details]
Screenshot of arpit.codes in Safari 26.0.1

Filing per Jen Simmons’ suggestion to check why Safari renders the top bar as white (#f8f9fa) on my site.

For reference: https://bsky.app/profile/jensimmons.bsky.social/post/3m4h2iflid22e

From what I understand, Safari now automatically derives the top bar tint from the html or body background color after dropping support for `<meta name="theme-color">`. In my case, the top bar color matches my site’s background (#f8f9fa), which seems correct. But since Jen mentioned “the top bar shouldn’t be white,” I’m filing this to confirm whether the current behaviour aligns with Safari’s intended logic.

Steps to Reproduce:

1. Visit https://arpit.codes/ in light mode in Safari 26.0.1 on iOS and macOS
2. Observe top bar color (#f8f9fa)
3. Check out the background color of the body element (#f8f9fa)

Expected Behavior:

Not sure. Some clarity on this would be helpful. But my understanding is that Safari derives the top bar tint from the page background.

Actual Behavior:

Top bar renders as white (#f8f9fa), which matches the background color. (see attached screenshot)

Environment:

iOS 26.0.1
macOS 26.0.1

Notes:

This issue is being filed for verification, not necessarily to report a bug.

[Radar WebKit Bug Importer]

<rdar://problem/164253699>

[Wenson Hsieh]

Hi Arpit!

Thanks for filling this report — this current behavior (white background for the top toolbar) seems expected, since the top header is not fixed or sticky-positioned (i.e., does not "attach" to the viewport while the page scrolls).

A solid background color extension ("top bar tint") is only needed in cases where there's a viewport-constrained (fixed or sticky) element near one of the edges of the viewport that borders an obscured content inset (such as the top toolbar on macOS, or compact tab bar on iOS), in order to avoid a gap above or below fixed elements in the page that would otherwise appear when scrolling. This color extension behavior is more critical on iPhone, where there's a much "softer" blur effect underneath the browser UI (and so more of the page underneath is otherwise directly visible).

(In reply to Wenson Hsieh from comment #2)
> Hi Arpit!
> 
> Thanks for filling this report — this current behavior (white background for
> the top toolbar) seems expected, since the top header is not fixed or
> sticky-positioned (i.e., does not "attach" to the viewport while the page
> scrolls).
> 
> A solid background color extension ("top bar tint") is only needed in cases
> where there's a viewport-constrained (fixed or sticky) element near one of
> the edges of the viewport that borders an obscured content inset (such as
> the top toolbar on macOS, or compact tab bar on iOS), in order to avoid a
> gap above or below fixed elements in the page that would otherwise appear
> when scrolling. This color extension behavior is more critical on iPhone,
> where there's a much "softer" blur effect underneath the browser UI (and so
> more of the page underneath is otherwise directly visible).

Hi Wenson,



Thanks for the great explanation. I appreciate you clarifying how the solid background color extension logic works in Safari.