[css-anchor-position-1] Scroll adjustment doesn't work for chain of anchor-positioned elements

[xiaochengh]

Consider a tree like

CB
+- scroller
|  +- anchor
+- abspos1
+- abspos2

where abspos1 is anchored to anchor, and abspos2 is anchored to abspos1

(test case available at https://jsfiddle.net/b1ycnpvL/)

When scrolling the scroller, the desired behavior is that both abspos elements should move. But currently only abspos1 moves.

This is because the current spec only considers scroll offsets applied directly by scrollers between CB and the anchor, then the snapshotted scroll offset for abspos2 is 0, which means there's no adjustment.

This issue is similar to #8448 that it's caused by non-scroll translations applied to the anchor. This issue, however, seems more severe because it breaks nested menus.

The proper fix is probably by making snapshotted scroll offset taking more offsets into account, including sticky position offsets and anchor position offsets applied to all ancestors of the anchor, all the way until the CB (exclusively).

The name "snapshotted scroll offset" still seems appropriate, though, because the extra offsets are still caused by scrolling.

[flackr]

This feels similar to nested sticky position. In particular, when you nest a sticky position element within another sticky position element it needs to take into account that it is being shifted by its ancestor sticky position element.

We handle this in chromium by tracking the nearest ancestor which has a dynamic (i.e. sticky position) offset and we always update those ancestors first, then when calculating the offset applied to the descendant, we first apply the ancestor offset.

In this case, it sounds a bit different in that abspos2 isn't normally shifted by abspos1, but the anchor constraint is so a similar approach should work.

This feels like an implementation issue more than a spec issue though, save for perhaps circular anchor positions, though I believe the anchor position spec already prevents this.

Note that both anchor and sticky probably need to be aware of each other in these offset calculations. E.g. a sticky descendant of an anchor pos element needs to know the anchor offset to know the adjusted sticky constraints.

[wangxianzhu]

Chrome change to support chained anchor-position has landed: https://chromium-review.googlesource.com/c/chromium/src/+/5274137. All tests are marked tentative. Is there a plan to update the spec?