[csswg-drafts] Allow anchor-size() as a value for scroll-padding-* (#13558)

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

== Allow anchor-size() as a value for scroll-padding-* ==


# Allow `anchor-size()` as a value for `scroll-padding-*`

## Summary  

`anchor-size()` is currently not usable in `scroll-padding-*`. Allowing it would enable scroll offsets to automatically match the size of anchored elements such as sticky or fixed headers, eliminating brittle hard-coded values and JavaScript measurement workarounds.

This is particularly relevant for preventing focus and fragment targets from being obscured by persistent headers (WCAG 2.4.11 — Focus Not Obscured).

---

## Problem  

A common pattern is a sticky or fixed header at the top of the page. When navigating via:

- Fragment identifiers (`#section`)
- Keyboard focus navigation
- `scrollIntoView()`
- Scroll snapping

Content can be partially hidden behind the header. (I'm using the code from [MDN pages](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning) as an example of focused elements hiding behind their header)

Today, the workaround is to manually synchronize a value:

```css
.page-layout__header {
  anchor-name: --header;
}

html {
  /* Hardcoded fallback */
  scroll-padding-top: 100px;
}
```

Or via JavaScript measurement and a custom property:

```js
const header = document.querySelector('.page-layout__header');

function update() {
  document.documentElement.style
    .setProperty('--header-height', header.offsetHeight + 'px');
}

update();
addEventListener('resize', update);
```

Then:

```css
html {
  scroll-padding-top: var(--header-height);
}
```

This introduces:

- JavaScript dependency
- Resize observers or event listeners
- Manual synchronization
- Risk of mismatch during responsive changes

---

### Desired Solution  

```css
.page-layout__header {
  anchor-name: --header;
}

html {
  scroll-padding-top: anchor-size(--header block);
}
```

This would:

- Keep the offset declarative
- Automatically adapt to dynamic header height
- Avoid layout measurement scripts
- Improve accessibility robustness

---

### Why This Is a Good Fit  

`scroll-padding-*` defines the effective inset of the scrollport.

`anchor-size()` exposes the resolved size of an anchored element.

Using the block size of a header anchor as the scrollport inset is a natural mapping of layout data to scroll positioning behavior.

---

### Accessibility Impact  

This enables a CSS-only solution to prevent focus targets from being obscured by persistent headers, helping satisfy:

WCAG 2.4.11 — Focus Not Obscured (Level AA)

---

### Questions  

- Is `anchor-size()` excluded from `scroll-padding-*` due to potential cyclic layout dependencies?
- If so, could it be permitted where no cyclic dependency exists (e.g., when the anchor is not layout-dependent on the scroll container)?

---

### Related  

Related broader discussion about allowing anchor functions outside inset/sizing properties:  
https://github.com/w3c/csswg-drafts/issues/8586


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


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

Received on Wednesday, 25 February 2026 06:59:10 UTC