Vyhľadajte odpoveď

Vyhnite sa podvodom s podporou. Nikdy vás nebudeme žiadať, aby ste zavolali alebo poslali SMS na telefónne číslo alebo zdieľali osobné informácie. Nahláste prosím podozrivú aktivitu použitím voľby “Nahlásiť zneužitie”.

Learn More

::before behaves differently on macOS and Windows10

  • 5 odpovedí
  • 1 má tento problém
  • 9 zobrazení
  • Posledná odpoveď od Sherlock907

more options

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.


Website: https://get-youtube-playlist-length.herokuapp.com/

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. Website: https://get-youtube-playlist-length.herokuapp.com/

Vybrané riešenie

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.

Čítať túto odpoveď v kontexte 👍 1

Všetky odpovede (5)

more options

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.

Pomohla vám táto odpoveď?

more options

Can you provide the link to that software you using?

Pomohla vám táto odpoveď?

more options

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.

Pomohla vám táto odpoveď?

more options

Vybrané riešenie

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.

Pomohla vám táto odpoveď?

more options

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!

Pomohla vám táto odpoveď?

Položiť otázku

Ak chcete pridať odpoveď, musíte sa prihlásiť k svojmu účtu. Ak účet doteraz nemáte, položte novú otázku.