Skip to content

Build1 publisher3 min readPublished

Safari Technology Preview 252 fixes two accessible-name bugs

Two accessibility name calculation bugs and six animation timeline bugs are resolved in WebKit's latest preview build, including scroll-timeline-name matching across shadow boundaries and a removal of three margin-trim values.

The Engineer · Build desk

What happened

  • The release notes list two resolved accessibility issues and six resolved animation issues, alongside a longer set of CSS fixes and five new CSS features.
  • WebKit now loosely matches scroll-timeline-name and view-timeline-name across shadow tree boundaries, so a scroll-driven animation inside a shadow root can bind to an outside timeline.
  • The build removes the inline, inline-start and inline-end values from margin-trim, leaving the property accepting none, block, or a combination of block-start and block-end.

Compiled by The EngineerSomething wrong?How this is made

Why it matters

  • decision Teams carrying aria-label overrides on display: contents wrappers now have to decide whether to keep them, since the override and the corrected engine will both be in play across the support matrix for a while.
  • constraint Stylesheets that set margin-trim: inline lose a value that used to parse in WebKit, so the declaration becomes invalid rather than merely unsupported.
  • capability Component libraries that ship shadow DOM can start naming scroll timelines in the host document and consuming them inside, which was not addressable from inside the shadow root before.
  • cost The fixes only reach users when a stable Safari picks them up, so the workaround code stays in every bundle and every test suite until the older versions leave the support floor.

The first accessibility fix is about `display: contents`. A `display: contents` element has no box of its own; its children lay out as if the element were not there. WebKit was computing that element's accessible name by pulling in text from its siblings [2]. Anything that reads a name from such an element got a longer string than the DOM subtree justifies. If you have shipped an `aria-label` on a wrapper because the computed name came out wrong, that workaround now sits on top of a fixed engine.

The second one is narrower and more annoying. Some accessible name and value computations ask for text without list markers, and WebKit was including the markers anyway [3]. A list item's bullet or number is presentational. It was ending up in the name string.

Most of the animation fixes are timeline bugs. A progress-based timeline with an unresolved current time was being treated as a progress timeline boundary [4]. Frame rate selection picked the lowest compatible rate for a newly encountered animation instead of the highest [5]. View timeline range boundaries threw away subpixel adjustments for sticky positioned elements [7], which is the kind of bug that shows up as a scroll-driven animation that lands one pixel early and only on some devices.

Two of them are about correctness under composition. Animations of `width` or `height` were being accelerated when only some keyframes carried a size-dependent `transform` [6]. Keyframes using `revert-layer` or `revert-rule` stopped being recomputed after a `KeyframeEffect` was copied [8]. And `scroll-timeline-name` and `view-timeline-name` are now loosely matched across shadow tree boundaries [9]. That last one matters if you build in web components: a scroll-driven animation inside a shadow root can now find a timeline named outside it.

None of this ships to users yet. Safari Technology Preview 252 is a preview build for macOS Golden Gate and macOS Tahoe, updated through System Settings under General then Software Update [1]. The release covers WebKit changes between 319252@main and 320112@main [10]. Fixed in trunk, unknown date in a stable Safari, and your workaround stays in the bundle until your support matrix drops the versions that need it.

One entry on the list takes a feature away. WebKit removed the `inline`, `inline-start` and `inline-end` values from `margin-trim`, which now accepts `none | block | [ block-start || block-end ]` [11]. That is a narrowing of the property's grammar. Code that set `margin-trim: inline` was valid CSS in an earlier WebKit and is now not. It is listed among the resolved issues [11], which suggests the earlier grammar was the defect.

The new CSS features in the same build are the ones worth reading the spec on before use: `named-feature()` in `@supports` conditions, `CSSConditionRule.supports`, `CSSMediaRule.matches`, the unprefixed `user-select`, and percentage values in `text-decoration-inset` [12] [13] [14] [15] [16]. The unprefixed `user-select` is the one that removes a line of vendor-prefixed CSS from most stylesheets, eventually.

What to watch

  • Whether the removed margin-trim inline values return under a revised grammar or stay out when the change reaches a shipping Safari.
  • Which stable Safari release the 319252@main to 320112@main range lands in, since that sets when the workarounds can be deleted.
  • Whether screen reader test suites calibrated against the old sibling-text accessible name output need rebaselining.
Loading claim ledger
Loading source directory links
Loading share composer
Loading topic controls
Loading related stories