[csswg-drafts] [scroll-animations-1] View progress contain of a sticky positioned elements on the edges (#8298)

ydaniv has just created a new issue for https://github.com/w3c/csswg-drafts:

== [scroll-animations-1] View progress contain of a sticky positioned elements on the edges ==
There's a specific, but somewhat common, use-case of using a container as a `subject` of a `ViewTimeline` and use `range: contain` on it plus making it `sticky` positioned.

The problem is when this element is set to `top: 0` (many times also. with `height: 100vw`), so it should practically reach `contain 100%` just as it becomes stuck, but then it should keep its position on the scrollport while the scroll continues, so it's essentially still in "contain" mode.

A simple demo of the scene: https://codepen.io/ydaniv/pen/jOpBxxd

Apple's product pages are also notorious for this technique, for example:

- https://www.apple.com/airpods-pro/
- https://www.apple.com/airpods-3rd-generation/

The expected behavior is to add the duration in length of the scroll while the container is "stuck" to the total duration and extend the `contain` range to include that duration as well.

The spec currently says for `contain`:

> 100% progress represents the later position at which:
> - the [start](https://www.w3.org/TR/css-writing-modes-4/#start) [border edge](https://www.w3.org/TR/css-box-4/#border-edge) of the element’s [principal box](https://www.w3.org/TR/css-display-3/#principal-box) coincides with the start edge of its [view progress visibility range](https://www.w3.org/TR/scroll-animations-1/#view-progress-visibility-range).
> - the [end](https://www.w3.org/TR/css-writing-modes-4/#end) [border edge](https://www.w3.org/TR/css-box-4/#border-edge) of the element’s [principal box](https://www.w3.org/TR/css-display-3/#principal-box) coincides with the end edge of its [view progress visibility range](https://www.w3.org/TR/scroll-animations-1/#view-progress-visibility-range).

So the proposed change is to include in the prose a "switch case" that includes the definition of [sticky](https://www.w3.org/TR/css-position-3/#valdef-position-sticky) so that the effective scroll duration is extended to cover that length.

cc @fantasai @bramus @flackr 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8298 using your GitHub account


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

Received on Tuesday, 10 January 2023 19:38:36 UTC