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

[Arkkimaagi]

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 as an example of focused elements hiding behind their header)

Today, the workaround is to manually synchronize a value:

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

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

Or via JavaScript measurement and a custom property:

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

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

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

Then:

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

.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:
#8586