Tried a CSS blur filter on a login page, ended up with a ghost town background

I put a backdrop-filter: blur(10px) on a modal overlay for a client site last week. On Chrome it looked fine, but on Firefox the whole background turned into a solid white block. Learned that Firefox needs an explicit background color set on the element for backdrop blur to work. Anyone else run into browser quirks with newer CSS filters?

2 comments

2 Comments

the_patricia2d ago

Yeah the background-color thing got me too. What really threw me was how Safari handles backdrop-filter differently with overflow hidden on parent containers, had to wrap the whole thing in a separate div just to make it work there.

charlie_stone721d ago

The three hours I spent debugging that same backdrop-filter issue last month makes me wonder if Safari is worth the trouble for most sites. @the_patricia I get why you wrapped it in a separate div, but honestly, how many regular users are even on Safari these days? Maybe 1 in 10 visitors on a good day. I usually just drop a warning in the browser console and move on to things that actually matter.