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

@fantasai I think may be a bit trickier to specify. We have to work out whether the requested percentage is before or after the point at which the sticky positioned element sticks, and then use the startmost / endmost position respectively.

Consider a few cases with the common css:
```css
.sticky {
  position: sticky;
  top: 10px;
  height: 100px;
  animation-timeline: view();
  animation-range: exit 0% exit 100%; /* expanded for clarity */
}
```

1. Sticks below the top of the top of the viewport. In this case, the exit phase shouldn't begin until after the sticky element is no longer stuck as it's not until then that it starts to exit.
```css
.sticky {
  top: 10px;
}
```

2. Sticks slightly above the top of the top of the viewport. In this case, the exit phase should begin before the stuck position.
```css
.sticky {
  top: -10px;
}
```

3. Sticks at the top of the viewport. In this case, the exit phase should probably begin as soon as the sticky element reaches the stuck position but it is ambiguous because the element remains in that position until nearly the end of the scroll.
```css
.sticky {
  top: 0;
}
```

4. Sticks at the top of the viewport, animates to stuck position. In this case, the animation starts before the element sticks. It's ambiguous whether it should end as soon as the element sticks (technically touching the end position) or after the element leaves the stuck position (the first point at which it is no longer at exit 0%).
```css
.sticky {
  top: 0;
  animation-range: contain 99% exit 0%;
}
```

Cases 3 and 4 are somewhat challenging due to their ambiguity. For animation-range, we *could* look at whether it's the start or end of the range being asked for and use the startmost / endmost position respectively, however the same ambiguity is not easily solved for keyframes, so I'd suggest we choose a side and apply it consistently. E.g. when the range offset matches the stuck position it always uses the startmost or endmost.

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


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

Received on Friday, 10 March 2023 16:58:46 UTC