WebMechanic
KPCKevin Powell - Community
•Created by WebMechanic on 3/18/2023 in #front-end
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
.card is clickable thanks to the absolute positioning and sizing of the .card-link::after.
Right card: the parent span has an additional .fx class that sets a trivial filter:grayscale(.8) (for this demo) which breaks the absolute positioning.
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-filter, which is why I believe this to be a GPU/compositing glitch that has side affects on an element's layout.
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 drop-shadow as it has superior alpha blending on background images compared to box-shadow.
Thanks to everyone for having a go!3 replies