Skip to content

Fix the backdrop-filter order of operations to get opacity right #361

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix the backdrop-filter order of operations to get opacity right #361

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions filter-effects-2/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,12 @@ An element (call it B) with a backdrop-filter property other than ''backdrop-fil
the following steps are performed:
1. Copy the <a>Backdrop Root Image</a> into a temporary buffer, such as a raster image. Call this buffer T’.
2. Apply the backdrop-filter’s filter operations to the entire contents of T'.
3. If element B has any transforms (between B and the Backdrop Root), apply the <b>inverse</b> of those transforms to the contents of T’.
4. Apply a clip to the contents of T’, using the border box of element B, including <a href="https://drafts.csswg.org/css-backgrounds-3/#border-radius">border-radius</a> if specified. Note that the children of B are not considered for the sizing or location of this clip.
5. Draw all of element B, including its background, border, and any children elements, into T’.
6. If element B has any transforms, effects, or clips, apply those to T’.
7. Composite the contents of T’ into element B's parent, using source-over compositing.
3. If element B has any effects, opacity, or clips, apply those to T’.
4. Apply a clip to the contents of T’, using the transformed border box of element B, including <a href="https://drafts.csswg.org/css-backgrounds-3/#border-radius">border-radius</a> if specified. Note that the children of B are not considered for the sizing or location of this clip.
5. Composite the contents of T’ into element B's parent, using source-over compositing.
6. Draw all of element B, including its background, border, and any children elements, into another temporary buffer B'.
7. If element B has any transforms, effects, opacity, or clips, apply those to B’.
8. Composite the contents of B’ into element B's parent, using source-over compositing.

<pre class=link-defaults>
spec:filter-effects-1; type:element; text:filter
Expand Down