3 ms·
I have no idea what you are talking about regarding Safari ignoring "filter: blur()" - it's supported it since 2012, just a few months after Chrome added it. In
by chuckhendo 9y ago
I have no idea what you are talking about regarding Safari ignoring "filter: blur()" - it's supported it since 2012, just a few months after Chrome added it. In fact - I think at the time Chrome was still using Webkit.
"backdrop-filter" is a completely different thing. Rather than filtering the element itself, it filters all elements behind it. This is especially useful with blur. While you are correct that Safari is the only browser currently supporting it, it is part of the standard, although it's not yet finalized. Chrome also supports it if you enabled "Experimental Web Features"
- deleted 9y ago[deleted]
- colept 9y agoSafari "filter:blur()" is not compatible with background images. Background images on a filtered element will disappear. While "backdrop-filter" is not compatible with any other browser. You either have to choose Safari (which only has a leading-yet-declining share on Macs) or every other browser to support.
- chuckhendo 9y agoI literally just tried this in Safari 10.1.1: https://codepen.io/chuckhendo/pen/NgGZqg https://codepen.io/chuckhendo/pen/NgGZqg Maybe it affects older versions of Safari, but I don't recall having run into it. "backdrop-filter" is irrelevant - it's an entirely different feature.
- colept 9y agoIt works now I guess, but Safari has quirks I've seen time and time again where things don't work as they should. I'm also hesitant to call it "fixed" considering it happened just last month and YMMV with a one-element pen.