Problematic backdrop-filter caused by a sibling
I can't figure out this problem, as you can see from this codepen: https://codepen.io/Lko3001/pen/MYKvRQO
The input is on top of the square, but the
backdrop-filter behaves in a weird way.
To fix this, for some reason, you can just disable the mix-blend-mode property of .problem
But this demo comes from a website i'm building, and I cannot remove that property.
Why is it happening?3 Replies
I've found the solution:
Giving
.wrapper isolation: isolate kind of fixes the problem, but now the backdrop blur doesn't have anything to blur behind, so add background-color: white too
But I still have no idea why this is happening. I know mix-blend-mode creates a new stacking context. But that's not the problem, even transform or opacity create one, but they don't cause the same problem.
From the specs it says this:
Applying a blendmode other than normal to the element must establish a new stacking context [CSS21]. This group must then be blended and composited with the stacking context that contains the element.But still, why is the backdrop-filter breaking? Sure, the
mix-blend-mode element is basically "bleeding" out the page apparently. According to the specs, when you create an element with backdrop-filter, it creates a backdrop root and samples from the closest parent with a backdrop root. But most importantly the specs say this:
Note: No content that is a DOM ancestor of the Backdrop Root element should contribute to or affect the Backdrop Root Image.And a backdrop root is created by:
The root element of the document (HTML). An element with a filter property other than "none". An element with an opacity value less than 1. An element with mask, mask-image, mask-border, or clip-path properties with values other than “none”. An element with a backdrop-filter value other than "none". An element with a mix-blend-mode value other than "normal". An element with a will-change value specifying any property that would create a Backdrop Root on non-initial value.But if in the demo you use
filter instead of mix-blend-mode, you won't get the same problem, and that's probably because
This specification does not yet have Working Group consensus, specifically on the definition of Backdrop Root. See discussion in issue 53.
What lko is saying is that the mix-blend-mode on the
.problem element is breaking the filter: blur() on the input (the fact that it is an input is not relevant). The two elements are un-related so, in theory, the mix-blend mode should not affect the other elements.
From what I have read this is a known issue with mix-blend-mode but as of yet doesn't have a "proper" solution.Have you checked in different browsers ? I don’t remember what it was but I remember I had an issue with blur() in one browser where it was fine in another and i had to rearrange the order of properties to fix it.
Sorry that I don’t remember what the winning order was 😆 maybe try reordering the relevant properties.