Hi everyone,
I’m experiencing a weird issue where my backdrop-filter (added using custom code) is only working on a dropdown menu when the screen width is greater than 2048px. This only happens in Safari where Chrome works perfectly at any size. This filter isn’t supported in IE and Firefox, so I have a fall-back for both of those.
The same filter is also applied to the hover state on some images and works perfectly in both Safari and Chrome… it’s just my full screen dropdown that seems to break the frosted effect I’m after.
I read that if there’s an element with overflow hidden anywhere that it can break the filter, but the solution of adding 0px blur to that div didn’t seem to work for me.
Screenshots show the filter working on a 2050px wide browser window and not working on a 2048px wide window. If I inspect the code in the broken size, I can un-tick the blur property and re-tick it to fix the issue which seems quite strange.
Staging URL here:
Click the + in the menu to view the full-screen dropdown in question.
Here is my site Read-Only: LINK