Safari 15 theme-color and translucent address bar

Question

Created Jun ’21

Replies 1

Boosts 0

Views 2.9k

Participants 2

I'm trying to generate a page with a fixed header which has the same color as theme-color and therefore the address bar.

I tried to use grid layout or just position: fixed, both have undesired effects.

grid, example: https://2qzht.csb.app

The content only scrolls with mouse-wheel (or touch on mobile). It's not scrollable on Apple Watch with the crown.

fixed, example: https://cdv9k.csb.app

Content is scrollable with keyboard and Apple Watch crown. The translucent address bar in Safari 15 now shows the content as it scrolls by and therefore distorting the experience with having the same color at the top of the page including the address bar.

I didn't find a fix for the scrolling issue and didn't find anything to disable the translucent address bar or even set the color to the same value as the address bar (including the translucent effect). I found (on some apple pages) that "backdrop-filter: saturate(180%) blur(20px);" might deliver a similar effect, but this is still different than the address bar and breaks if a background-image is used.

Is there any way to fix those?

Boost

Answer 1

xAlien95 OP

Sep ’21

It would be nice to have (or extend) a <meta ...> tag to address the address bar translucency. Did you submit a feedback for it?

In the mean time, I guess you can use something along the lines of placing a white div on top, out of bounds, hidden behind the address bar.

https://kyj7l.csb.app

Note that the "place something white behind" doesn't work when the scroll position is small in modulus and you have Dark Mode enabled (I'm assuming that that happens because a small fraction of black is used to initially generate the blur effect on the address bar in that case, maybe you can use a black div when Dark Mode is turned on, adjusting the theme-color accordingly?). Furthermore, I used a scroll event listener to remove the white div when scrolling up and an event listener can be quite heavy CPU wise. I would very much appreciate a proper way to disable the default blur.

Tested on macOS 11.6, Safari 15.0 (16612.1.29.41.4, 16612).

0