Re: [csswg-drafts] [css-view-transitions-1] Should mix-blend-mode be a part of the ua opacity animation? (#8924)

That's a good question. `isolation` has to induce a stacking context (since that affects paint order) but doesn't necessarily require us to composite the descendants first if they are all using normal blending. Blending is associated if every element has normal blending.

Blend(A, Blend (B, C)) = Blend(Blend(A,B), C)

Thank you @ccameron-chromium for walking me through the math!

In that case, I'm good with this proposal. Just to summarize:

- The current UA CSS for cross-fading the 2 images is as follows:
    ```css
    @keyframes -ua-view-transition-fade-out {
 to { opacity: 0; }
    }
    @keyframes -ua-view-transition-fade-in {
 from { opacity: 0; }
    }
    :root::view-transition-old(*) {
 animation-name: -ua-view-transition-fade-out;
 mix-blend-mode: plus-lighter;
    }
    :root::view-transition-new(*) {
 animation-name: -ua-view-transition-fade-in;
 mix-blend-mode: plus-lighter;
    }
    :root::view-transition-image-pair(*) {
        isolation: isolate;
    }
    ```

- We want to change it to this instead:
    ```css
    @keyframes -ua-view-transition-fade-out {
 to { opacity: 0; }
    }
    @keyframes -ua-view-transition-fade-in {
 from { opacity: 0; }
    }
    @keyframes -ua-mix-blend-mode-plus-lighter {
      from { mix-blend-mode: plus-lighter }
      to { mix-blend-mode: plus-lighter }
    }
    :root::view-transition-old(*) {
 animation-name: -ua-view-transition-fade-out, -ua-mix-blend-mode-plus-lighter;
 mix-blend-mode: plus-lighter;
    }
    :root::view-transition-new(*) {
 animation-name: -ua-view-transition-fade-in, -ua-mix-blend-mode-plus-lighter;
 mix-blend-mode: plus-lighter;
    }
    :root::view-transition-image-pair(*) {
        isolation: isolate;
    }
    ```
    Because the blending is tightly coupled to the cross-fade. If the author is overriding the cross-fade, the blend mode is just getting in their way.

Open to suggestions to set up this CSS such that `isolation` also gets removed if the author removes the cross-fade animation. But we can optimize the rendering internally assuming none of the elements in the sub-tree have normal blending.

-- 
GitHub Notification of comment by khushalsagar
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8924#issuecomment-1583179077 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 8 June 2023 19:03:09 UTC