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!
2 Replies
phyrasaur
phyrasaur2y ago
TIL, from the answer:
A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided.
https://stackoverflow.com/questions/52937708/why-does-applying-a-css-filter-on-the-parent-break-the-child-positioning
Stack Overflow
Why does applying a CSS-Filter on the parent break the child positi...
So I have this title-screen "animation" that has the title centered on a fullscreen page and when you scroll down it becomes smaller and remains at the top of the page. Here is a working
WebMechanic
WebMechanic2y ago
thank you for finding that! So then it's WebKit not following the spec. Sadly the suggested workaround doesn't work with this design, but it's cosmetics anyway.
Want results from more Discord servers?
Add your server