backdrop blur on ios
-
I had a similar question two years ago
http://laythemeforum.com:4567/topic/6198/backdrop-blur-mobile-nav-for-safari/3?_=1685110042396(I'm only here to possibly be notified if someone knows an answer).
-
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...
-
do u have a link?
-
in my code i do use the webkit prefix
-
hi armin
this is the link:
sqk.ati 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
-
can u remove your mobile custom css:
nav.mobile-nav { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
then see if it works
-
mh
maybe go to customize
mobile
mobile menu
and choose mobile menu style 2
-
thx - style 2 works! i will stay with this for now.
style 3 still doesn't also without the custom css
-
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.
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it