Intent to Ship: CSS anchor positioning remembered scroll offset
Morten Stenshorne
Contact emails
mste...@chromium.orgExplainer
NoneSpecification
https://drafts.csswg.org/css-anchor-position-1/#scrollSummary
Add support for the concept of "remembered scroll offset" - see https://drafts.csswg.org/css-anchor-position-1/#scroll When a positioned element has a default anchor, and is tethered to this anchor at one edge, and against the original containing block at the other edge, the scroll offset will be taken into account when it comes to sizing the element. This way a developer can use all visible space (using `position-area`) for the anchored element when the document is scrolled at a given scroll offset. In order to avoid layout (resizing the element) every time the document is scrolled (which is undesired behavior, and also bad for performance), what will be used is a so-called "remembered scroll offset", rather than always using the current scroll offset. The remembered scroll offset is updated at a so-called "anchor recalculation point", which is either: - When the positioned element is initially displayed - When a different position option (`position-try-fallbacks`) is chosen
Blink component
Blink>LayoutTAG review
NoneTAG review status
PendingRisks
Interoperability and Compatibility
Anchor positioning isn't shipping in any other engine yet.
Gecko: Positive (https://github.com/mozilla/standards-positions/issues/794) Anchor positioning not implemented in Firefox.
WebKit: Support (https://github.com/WebKit/standards-positions/issues/167) Anchor positioning not implemented in Safari.
Web developers: No signals
Other signals:
WebView application risks
Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?
None
Debuggability
None
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?
NoIs this feature fully tested by web-platform-tests?
Yeshttps://wpt.fyi/results/css/css-anchor-position?label=master&label=experimental&aligned https://wpt.fyi/results/css/css-anchor-position/position-area-scrolling-005.html?label=master&label=experimental&aligned
Flag name on about://flags
Finch feature name
CSSAnchorRememberedScrollOffsetRequires code in //chrome?
FalseTracking bug
https://issues.chromium.org/issues/373874012Estimated milestones
| Shipping on desktop | 135 |
| Shipping on Android | 135 |
| Shipping on WebView | 135 |
Anticipated spec changes
Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).
NoneLink to entry on the Chrome Platform Status
https://chromestatus.com/feature/4710507824807936?gate=5315183922380800Links to previous Intent discussions
Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKWZFm5%3D2_bAxBDiD%3DzDaxbZOx7SZiZvEc5tmwCkUfTxevkphw%40mail.gmail.com
Daniel Clark
Can you remind me what the current behavior is without the remembered scroll offset? I am wondering if there’s any scenario where changing this could break existing anchor pos usage.
> Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?
> No
Any reason this can’t ship on all platforms?
-- Dan
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to
blink-dev+...@chromium.org.
To view this discussion visit
https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKWZFm6f2VOKrnSMcMCsDak41x-mij1LkDGVpYshEn9jBE7Tmw%40mail.gmail.com.
Morten Stenshorne
> Can you remind me what the current behavior is without the remembered
> scroll offset? I am wondering if there’s any scenario where changing
> this could break existing anchor pos usage.
doesn't take the scroll offset into account. If percentage-sizes are
used on anchor positioned elements, the resulting size will be quite
useless when scrolled. Example:
```
<!DOCTYPE html>
<style>
#container {
overflow: scroll;
position: relative;
width: 400px;
height: 400px;
}
#anchor {
anchor-name:--a;
margin-left: 100px;
width: 50px;
height: 50px;
background: hotpink;
}
#anchored {
display: none;
position: absolute;
position-anchor: --a;
position-area: bottom;
position-try-fallbacks: flip-block;
position-try-order: most-height;
width: 100px;
height: 100%;
box-sizing: border-box;
border: solid;
background: cyan;
}
</style>
<div id="container">
<div style="height:500px;"></div>
<div id="anchor"></div>
<div id="anchored"></div>
<div style="height:1000px;"></div>
</div>
<script>
anchor.onclick = function() {
let s = anchored.style
s.display = s.display == "block" ? "none" : "block";
}
</script>
```
Scroll down to the hotpink box and click it.
With this change, a cyan box will appear above or below the hotpink box,
taking up all available space in the scrollport.
Without this change, the scroll offset isn't taken into account, but the
inset-modified containing block sizes are still confined by that of the
scrollport. This means, among other things, that there will be zero
height below the anchor, because this is at offset 500px+50px, and the
height of the scrollport is only 400px (minus the horizontal scrollbar,
even). Above the anchor, there's 500px of space, but this is too large
to fit within the scrollport at any scroll offset except 0, so that
option is discarded.
>> Will this feature be supported on all six Blink platforms (Windows,
>> Mac, Linux, ChromeOS, Android, and Android WebView)?
>
>> No
>
> Any reason this can’t ship on all platforms?
platforms. Thanks for catching.
--
Morten Stenshorne, Software developer,
Blink/Layout, Google, Oslo, Norway
Dan Clark
Chris Harrelson
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/a8ef4b2f-d3eb-44e2-b1bf-1502dca18822n%40chromium.org.
Alex Russell
Chris Harrelson
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/5e69e762-861c-4a80-9c13-33f8520ad031n%40chromium.org.