::before behaves differently on macOS and Windows10
Hello! I hope this is the right place to ask.
So i used glassmorphism on a simple webapp (backdrop-filter). Wrote a Fallback for firefox with the help of ::before and filter:blur() as backdrop-fillter's are sadly still not supported, eventhough they look really really nice.
How ever the fallback works on macOS as expected but on Windows Firefox behaves very very wierd. First of all the blured effect is behind everything else and you have to change the z-index to actually see it and if you do it is actually much larger than it should be. If you play around with the z-indexes you actually get the blur at the right position but the area is still much larger than on mac and not fitting the border at all and after a few hours of trying, I'm not sure if this is a bad by me or not. Kinda feels like it shouldnt behave like that.
פתרון נבחר
The CSS backdrop-filter property is disabled by default, and also doesn't work if WebRender is disabled. Per the MDN implementation note:
From version 70: this feature is behind the layout.css.backdrop-filter.enabled preference (needs to be set to true) and the gfx.webrender.all preference (needs to be set to true). To change preferences in Firefox, visit about:config. Source: https://developer.mozilla.org/docs/Web/CSS/backdrop-filter ("Browser Compatibility" section after clicking the * under Firefox)
That could explain why one Firefox behaves differently than another.
Read this answer in context 👍 1כל התגובות (4)
For some reason the images are black so here a link: https://prnt.sc/IMBdNeWS5ZnI On the right you see Firefox on MacOS and on the left Firefox in Windows 10. Same html, same css...
Just noticed this is because browser on mac I had backdrop-filter enabled in about:config and the windows one didnt. Oddly enough it doesnt enable backdrop-filter but filter: blur() on both. I guess i'll have to let firefox users just see a purple background with lower opacity -.-
Very disappointing.
https://github.com/Sherlock907/yt-playlist-length
They now behave the same. This was just me having different settings in about:config. But its sad that after all these years firefox still doesnt support backdrop filter. And its wierd that backdrop-filter enabled in about:config enables filter:blur() but not the actual backdrop filter.
פתרון נבחר
The CSS backdrop-filter property is disabled by default, and also doesn't work if WebRender is disabled. Per the MDN implementation note:
From version 70: this feature is behind the layout.css.backdrop-filter.enabled preference (needs to be set to true) and the gfx.webrender.all preference (needs to be set to true). To change preferences in Firefox, visit about:config. Source: https://developer.mozilla.org/docs/Web/CSS/backdrop-filter ("Browser Compatibility" section after clicking the * under Firefox)
That could explain why one Firefox behaves differently than another.
I found a solution that works but its probably not best practise and nothing for bigger sites.. Now i just used a pre-blured image and set is as background for the section that would use the backdrop-filter (as Fallback for Firefox). So far it looks good, works and it even looks better than the first fall back attempt with filter:blur(). :D
Please Firefox - Team add backdrop-filter support!