filter breaks positioning
I recently ran into an interesting phenomenon where applying a CSS filter nuked the absolute positioning and size of a child's pseudo element and made it collapse to its intrinsic size
I was wondering if this is a "known" bug/behaviour in Blink/Chromium and Firefox (unexpectedly appears to work in WebKit) or if I missed something fundamental about stacking contexts, positioning, containment and alike that non-WebKit browsers need for this not to break.
Here's an excerpt that depicts the issue when you hover the card (left card ok, right card broken):
https://codepen.io/WebMechanic/pen/abajJQw?editors=1100
Left card: the whole surface area of
Right card: the parent span has an additional
The type of filter doesn't matter, but as a result one has to click the actual link element in the heading. While creating this pen I noticed the same problem occurs with
Note: In the original design, the "inverted" headline ought to have a similar glow and blur effect as the content box inside the card using several layered
Thanks to everyone for having a go!
I was wondering if this is a "known" bug/behaviour in Blink/Chromium and Firefox (unexpectedly appears to work in WebKit) or if I missed something fundamental about stacking contexts, positioning, containment and alike that non-WebKit browsers need for this not to break.
Here's an excerpt that depicts the issue when you hover the card (left card ok, right card broken):
https://codepen.io/WebMechanic/pen/abajJQw?editors=1100
Left card: the whole surface area of
.card.card-link::afterRight card: the parent span has an additional
.fxfilter:grayscale(.8)The type of filter doesn't matter, but as a result one has to click the actual link element in the heading. While creating this pen I noticed the same problem occurs with
backdrop-filterNote: In the original design, the "inverted" headline ought to have a similar glow and blur effect as the content box inside the card using several layered
drop-shadowbox-shadowThanks to everyone for having a go!
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
