backdrop-filter
It doesn't matter if you put the static values, CSS custom properties, or inherit them via inherit, the backdrop-filter will not be reflected on the children 😦 Is it bug or feature?
https://codepen.io/luko248/pen/bGXrejO
7 Replies
What I can say for sure is that Chrome renders this differently than FF and Safari do. As to whether it's a bug: I don't know. Seems that it might just not be clear from the spec what's suppose to happen in this case. Check out this SO post: https://stackoverflow.com/questions/63907743/parent-element-backdrop-filter-does-not-apply-for-its-child
as a side note cool to see the un-prefixing finally happening with backdrop-filter after 10 years....
Thanks
it seems like chrome is doing it right
https://drafts.csswg.org/css-cascade/#computed
inherit represents the computed value of the parent
blur(.25em) <-- this doesnt seem like something you can compute.25em with the default 16px font-size computes to 4px. That seems pretty straight forward. Am I missing something?
If you haven't already popover to the Interop proposal for
backdrop-filter and give it a thumbs up. Maybe we can finally get this all sorted out next year?: https://github.com/web-platform-tests/interop/issues/822but what's the computed value of
blur()?Chrome dev tools screen shot shows it's catching the computed 4px from the parent just fine. It's the value inside the function that gets computed just like with the other functions like rgb(), linear-gradient(), etc. The issue is what the browser is doing with (or not doing with) the value when painting.
but rgb is a computed value: it's a color
a linear-gradient() is an image
blur() is ... blur()
that's why i think that not rendering it is correct