NO BUG: Glassmorphism Sticky Header - Meta Theme Color issue

Bugs
1

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)

Hi!

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.

Expected Outcome:

  • Being able to set own meta theme color without getting overwritten from bricksbuilder itself

IMG_C9D2F1BDE9CF-1
IMG_C9D2F1BDE9CF-11170Ă—2532 133 KB

2

Hi,
Thanks so much for your report!

What means:

And what exactly is a meta theme color?

Btw., it looks fine on my iPhone 13 in Safari :thinking:

Best regards,
timmse

IMG_1850.PNG
IMG_1850.PNG1170Ă—2532 140 KB

3

Hi timmse, thanks for your reply!

8b9cfac551d0d89119b62d7878ff61402beda209
8b9cfac551d0d89119b62d7878ff61402beda2091170Ă—2532 147 KB

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.

Bildschirm­foto 2023-03-19 um 22.21.28

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:

  1. Add this CSS to the header background Section:
root{
 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 ); 
}
  1. Enable Sticky Header

Expected Outcome:

  • 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 :sweat_smile: I try my best :grin:

best regards

4

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:

5

I investigated further and found out, that my new iPhone didn’t have the option enabled to show theme color in the top bar :sweat_smile:

my bad…

For everyone else experiencing this: You need to go to iOS Settings > Safari > Tabs and activate it there.

Best Regards

1 Like
6

I can tell you what worked for me, what i did was this enabled color filters on your iPhone and want to turn them off, you can do so by following these steps:-
1. Open Settings:-
-Go to the home screen on your iPhone and tap on the “Settings” app. It’s represented by a gear icon.
2. Navigate to Accessibility Settings:-
-In the Settings app, scroll down and tap on “Accessibility.”
3. Access Display & Text Size:-
-Within the Accessibility settings, tap on “Display & Text Size.”
4. Turn Off Color Filters:-
-Scroll down to the “Color Filters” section.
-Toggle off the switch next to “Color Filters” to disable them.

By turning off the Color Filters, your iPhone will return to its standard color display settings. If you ever need to use color filters again, you can follow the same steps and toggle the switch back on. For more details follow instruction below.

https://www.youtube.com/watch?v=3qsgxZCVbBY&ab_channel=TheGeekPage