Re: [csswg-drafts] [css-view-transitions-2] Optionally capture some properties (e.g. opacity/border) as style instead of snapshot (#10585)

As part of experimentation, we've identified which properties need to participate in this and how, and also the potential compatibility-breaking parts (though it's not shipped yet, so we don't know if the compatibility breakage happens in practice).

## Categorization
We divide CSS properties into the following categories:

### Copied
Properties that should be captured, and also be rendered into the snapshot

* `overflow`
* `overflow-clip-margin`
* `contain` (potentially just convert `contain: paint` into `overflow: clip`)
* `transform-style` 
* `perspective`
(the last two actually don't have any effect on a flattened snapshot)

### Delegated
Properties that should be captured and delegated to the group, and the snapshot should be rendered without them (note that some of these are shorthands):

* `background`
* `border`
* `border-image`
* `border-radius`
* `box-shadow`
* `clip`
* `clip-path`
* `filter`
* `mask`
* `opacity`

## Notes
* The transform of the element should be copied in 3D space rather than flattened, to preserve the 3D effect of the origin.
* Applying overflow to the snapshot is a design choice, to avoid capturing very big overflowing content. This means that the author cannot use the pseudo-elements to animate scrolling an `overflow: scroll` DIV. However, the overflow is captured without the `border-radius`, which is applied separately as CSS and can be animated, as well as `clip-path` and `clip`.
* If we don't render the border, this affects the border box of the pseudo-elements, and its relationship with nested groups, as the border-box is what's used to determine the pseudo element's position. Suggesting that this change means that we need to project the padding box instead.




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


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

Received on Thursday, 19 September 2024 09:41:58 UTC