- 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