backdrop blur on ios

[quirin]

Hi Armin

the mobile backdrop blur is not working for me on IOS. any way to fix it?

this is how it looks like in chrome/android:

this is on ios:

these are the settings from the lay theme mobile menu(blur 20px):

site url: sqk.at

[brinifein]

I had a similar question two years ago
http://laythemeforum.com/topic/6198/backdrop-blur-mobile-nav-for-safari/3?_=1685110042396

(I'm only here to possibly be notified if someone knows an answer).

[quirin]

@brinifein

well, it should work with -webkit-

nav.mobile-nav {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}

according to:

but something is still funny with the backdrop blur in lay, as i need to set the backdrop blur amount for the menu bar to 20px and the for the submenu to 10px to achieve the same visual blur amount.

i'll keep trying...

[arminunruh]

do u have a link?

[arminunruh]

in my code i do use the webkit prefix

[quirin]

@arminunruh

hi armin

this is the link:
sqk.at

i used browserstack and several phones of friends to check crosscompatibility and as far as i could see, it works pretty much everywhere, except on iphone ios or chrome!?
i know u are using the right code and i also tried again with custom css just to make sure. maybe the problem is not on your side...

and also just to make sure: the problem for me is not the .navbar but the nav.mobile-nav

[arminunruh]

can u remove your mobile custom css:

    nav.mobile-nav {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

then see if it works

[arminunruh]

mh

maybe go to customize

mobile

mobile menu

and choose mobile menu style 2

[quirin]

@arminunruh

thx - style 2 works! i will stay with this for now.

style 3 still doesn't also without the custom css

[arminunruh]

i think ios safari doesn't compute the value correctly because the transition is from height:0 to height:100%. and the initial state is height: 0;
i think this is a ios safari bug.