Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tools: birdeatsbug.com or jam.dev)
just tried to implement glassmorphism into the sticky header. I’m facing an issue with iOS Safari. The top bar has adopted to glassmorphism style but it non reactive.
I also can’t set my own meta theme color. Its getting overwritten.
- Being able to set own meta theme color without getting overwritten from bricksbuilder itself
Thanks so much for your report!
And what exactly is a meta theme color?
Btw., it looks fine on my iPhone 13 in Safari
Hi timmse, thanks for your reply!
Yours is looking good…On my screenshot there is an edge between the top bar and the header. If you look closely on my top bar (which is normaly specified in html like this:
<meta name="theme-color" content="#f8f8f8" /> ) it has adopted the glassmorphism style from the header-section-background but is not reactive to the elements while scrolling. You can see that the top bar has a static gradient from grey to white.
When I try to specify another meta theme-color by injecting in the the header it won’t change.
In bricks the top bar automatically adapts to the header background color.
Steps to reproduce:
- Add this CSS to the header background Section:
background: rgba( 248, 248, 248, 0.75 );
backdrop-filter: blur( 17.5px );
-webkit-backdrop-filter: blur( 17.5px );
border: 1px solid rgba( 255, 255, 255, 0.18 );
- Enable Sticky Header
- iPhone Top bar should have a reactive glassmorphism background. With reactive I mean that the background should adapt to the website-elements while scrolling.
- I should be able to overwrite the top bar with the HTML Code:
Its a little complicated and hard to describe I try my best
I have never dealt with this topic before, hence the many question marks on my forehead.
See if it makes a difference when you use the meta tag like this:
<meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
Also, please take a look at this article:
I investigated further and found out, that my new iPhone didn’t have the option enabled to show theme color in the top bar
For everyone else experiencing this: You need to go to iOS Settings > Safari > Tabs and activate it there.