Build1 publisher2 min readPublished Updated
Safari Technology Preview 253 resolves a scroll timeline declared outside the target's hierarchy
The new WebKit preview matches style-originated scroll timelines globally, so a declaration no longer has to sit in the animated element's tree. Four of the seven animation entries in the notes settle which timeline a target resolves to.
The Engineer · Build desk
What happened
- Safari Technology Preview 253 is available for macOS Golden Gate and macOS Tahoe, and existing installs update through System Settings under General then Software Update.
- A separate fix covers stale state: changing a timeline-scope value previously failed to update timelines for animations outside that element's hierarchy.
- Revision 320969@main makes the subject parameter of the ViewTimeline constructor required, which the notes list as a resolved issue.
- The CSS section adds support for using sibling-index() and sibling-count() within container query conditions, at revision 320493@main.
Compiled by The EngineerSomething wrong?How this is made
Why it matters
- capability A component can ship its scroll timeline declaration in its own stylesheet and be animated from an element elsewhere in the page, with no shared ancestor and no timeline-scope hoist to make the name visible.
- cost Support probes that construct a bare ViewTimeline to feature-detect view timelines have to be rewritten, and library authors pay that cost before app teams notice anything.
- contradiction One entry widens name matching past the timeline-scope hierarchy while another forces a timeline defined outside that hierarchy to go inactive, so authors have to establish by test which path a given name takes.
- constraint Adoption planning covers both paths at once: the timeline-scope version keeps being maintained beside the new declaration until the behaviour lands in a shipping build.
A named scroll timeline is a string match. One element declares `scroll-timeline-name: --page`. Another sets `animation-timeline: --page`. The engine decides which declaration the second element meant, and release 253 widens that search: style-originated scroll timelines now match globally, and can be defined outside the target's hierarchy or that of an element carrying `timeline-scope` [3]. Read backwards, the entry describes the old limit. Where you could put the declaration depended on where the animated element sat in the tree.
Widening a lookup creates ties, and this release settles one. An animation could attach to a style-originated timeline made visible by `timeline-scope` instead of one established by an ancestor, and the ancestor-established timeline now takes priority [4]. Document-wide matching also means two unrelated components can declare the same name and find each other, so prefixing timeline names becomes the discipline custom properties already needed. In practice the priority rule protects the common case: a component that declares a timeline on its own wrapper keeps it even when an ancestor exposes a same-named timeline through `timeline-scope` [4].
The two behaviours arrived 44 revisions apart. Global matching is 320183@main [3]. The fix that makes a style-originated timeline defined outside a `timeline-scope` hierarchy yield an inactive timeline is 320227@main [6][15]. Four of the seven entries in the Animations section are about the same question of which timeline a target resolves to [12].
Release 253 covers the span between revisions 320113@main and 321067@main [2], 954 revision numbers [13]. The release notes do not say when any of the animation work reaches shipping Safari [14].
For this to be safe in a production stylesheet, two things have to hold that release notes cannot show: the resolution rules stay put between the preview engine and the shipping one, and every timeline name a component exposes is unique enough to survive document-wide matching. For teams already shipping view timelines, the entry with immediate value is elsewhere in the same list. An animation attached to a view timeline's scroll range now updates when the scroll container's scrollable overflow changes [8].
What to watch
- Whether global matching survives into a shipping Safari release, and which version number carries it.
- Whether WebKit documents how global matching interacts with the rule that forces an out-of-scope timeline inactive.
- Whether animation libraries that construct a bare ViewTimeline to detect support break on this build.