Issue
I have a container element that has variable opacity. Its child is supposed to cast a backdrop blur.
The issue is that the backdrop filter only applies when the parent's opacity is exactly 1. However, if I lower the opacity of the child itself, the backdrop filter stays.
Can anyone help me make this work properly?
I can't use background color to change the container's opacity.
#container{
opacity: 1;
position: absolute;
top:0;
width: 200px;
height: 80px;
outline: 0.1px solid black;
}
#child{
width: 100%;
height: 100%;
backdrop-filter: blur(10px)
}
<div>This should be blurred</div>
<div id="container">
<div id="child"></div>
</div>
<div style="position: absolute; top: 80px">
<span>Parent opacity:</span><input type="range" id="parentRange" min="0" step="0.01" max="1" value="1"><span id="parentReadout">1</span><br>
<span>Child opacity:</span><input type="range" id="childRange" min="0" step="0.01" max="1" value="1"><span id="childReadout">1</span>
</div>
<script>
parentRange.oninput = (e) => {
container.style.opacity = e.target.value
parentReadout.textContent = e.target.value
}
childRange.oninput = (e) => {
child.style.opacity = e.target.value
childReadout.textContent = e.target.value
}
</script>
Solution
After looking at the specification it's indeed not possible to do what I want without some yet unknown trickery.
I quoted the two key sections below, but the main idea is that the elements the filter are applied to are the ones between the backdrop root and the element with the backdrop-filter. The backdrop root is the nearest ancestor that fits at least one of a group of criteria, one of which is having an opacity < 1.
So in the scenario above, the parent becomes the backdrop root, and the blur is only applied to elements between it and the child.
The Spec:
The Backdrop Root Image for an element E is the final image that would be produced by the following steps:
Start at the Backdrop Root element that is the nearest ancestor of E.
Paint all content, in painting order, between (and including) the ancestor Backdrop Root element and element E.
Flatten the painted content into a 2D screen-space buffer.
Transform the border box of element E to 2D screen-space, and clip the final painted output to this border quad.
And:
A Backdrop Root is formed, anywhere in the document, by an element in any of the following scenarios. See § 3.2 Backdrop Root Triggers for more details on each:
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".
Answered By - Brother58697
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.