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;
>   }
>   :root::view-transition-new(*) {
>   animation-name: -ua-view-transition-fade-in, -ua-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.

This seems like a sensible solution to me.

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


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

Received on Tuesday, 13 June 2023 05:54:06 UTC