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
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
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.