- From: Khushal Sagar via GitHub <sysbot+gh@w3.org>
- Date: Fri, 30 Sep 2022 21:38:20 +0000
- To: public-css-archive@w3.org
khushalsagar has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-shared-element-transitions-1] Should isolation and plus-lighter blending be applied conditionally ==
The default animation in shared element transitions can have either of the following trees per tag:
## Cross-fade
```
::page-transition-container
|_::page-transition-image-wrapper
|_::page-transition-incoming-image
|_::page-transition-outgoing-image
```
There is visual state for an element in both outgoing and incoming DOM. The 2 have a cross-fade and need `isolation: isolate` on the wrapper and `mix-blend-mode: plus-lighter` on both the images to the blending right.
## Enter animation
```
::page-transition-container
|_::page-transition-image-wrapper
|_::page-transition-incoming-image
```
There is visual state only for an element in the incoming page which fades in.
## Exit animation
```
::page-transition-container
|_::page-transition-image-wrapper
|_::page-transition-outgoing-image
```
There is visual state only for an element in the outgoing page which fades out.
It's unclear how best to handle `isolation` and `mix-blend-mode` for the 3 cases:
1. Technically we don't need the `isolation` and `mix-blend-mode` properties in enter/exit animations. These were also causing sub-optimal rendering (in Blink) because the fact that they are no-op isn't always optimized out. So we could omit adding them in these 2 modes.
2. Always add them to these elements to ensure developers see a consistent style. Optimize out their effect in the implementation.
Option 1 is always better perf wise though it can be optimized if needed. I'd err for that unless there is a good reason to have option 2.
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7814 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 30 September 2022 21:38:22 UTC