fix(core): a touch press's release lasts until its fade has played by vjeux · Pull Request #8890 · meta/astryx

vjeux · 2026-10-29T00:54:51Z

Review only this PR's change: vjeux/astryx@540299d...78f233b (depends on #8360).

User impact

Under a finger, a pressed control's highlight (a button, switch, checkbox, card, menu row or list row) should fade out after the lift. A tap usually starts work, so the page's script often delays the fade's first frame; the release then ended mid-fade, and the highlight cut off.

Problem and solution fit

What led to it: this is part of a program to make Astryx's list components behave like iOS tables on phones. Moving a list row's release onto the compositor (#8077) showed it being cut short whenever script delayed its first frame.

Why: the touch press controller removed fading on a clock started at the lift. The release animation's end moves later with its first frame; the clock didn't. Why it matters: the press's last frames are the feedback that the tap registered, and on a busy tap they vanished.

Now, when the clock runs out, the controller looks for the press's finite release animation: on the surface (or its ::before or ::after), or on a part inside it whose nearest press owner is the surface, for a component that draws its release there (#8233's checkbox draws it on its box). A press owner nested inside keeps its own release. While one runs or still waits for its first frame, the release ends when that animation finishes or is cancelled; with none, it ends at the clock. Under reduced motion the clock is capped by the Reduce Motion cross-fade's duration (200 ms, read from its constant), and the overlay's release animation is capped the same way.

Size (gzip, base → head, the repository's size report run against #8360): the 86 components that load the touch press controller +334–465 B of import (Button +411 B); every other core component +38–83 B, the shared Reduce Motion constants the overlay now reads; component CSS +22–46 B, the package stylesheet +23 B.

Expected behavior and authority

usePressFeedback ("fades the release over 200 ms"); spec:AST-094 FR5 (the release plays the press model's duration and curve); design:user-states DR1/DR5; design:reduced-motion DR2 (a touch transition finishes in 200 ms or less).

Smallest restoration

A longer clock: still a guess, and a long block outlasts it.
An animationend listener per surface: every surface wires it, and a surface that unmounts mid-release never fires it.
Read the release animation off the element when the clock runs out (chosen): one place, every surface, no new API.

Evidence

Before: with a release whose first frame came after the clock, fading was removed mid-fade (unit cases below, red on fix(core): one click guard for the menu press model and the gesture host #8360's controller).
After: fading stays until the animation ends.
Unchanged: a cancelled release ends; with no release animation (an instant release, a surface without one, an engine without Web Animations) the release ends at the clock; a new press on the surface keeps its paint.
With fix(core): a checkbox or radio press releases on the compositor #8233's checkbox, which draws its 250 ms release on its box, fading went at the 200 ms clock, and that frame relaid and repainted the box in a Chromium trace; with this change it holds to the release's end.
feat(List): a row's start and end content animate with the list's animatedLayout handle (component:List FR12) #8803 carries its own copy of releaseAnimationsOf with the owner-only rule, so it needs the same change when it takes this pull request.
Eight unit cases; four fail on the previous controller and four guard what stays, including that a press owner nested inside never extends the outer press. The busy-first-frame browser proof is in fix(Item): a list row's touch press release runs on the compositor #8077: it needs that PR's compositor row release, since on main the overlay's release runs on the main thread and a blocked frame freezes it anyway.

Scope

One defect is restored.
Separable contradictory or unsettled tagalongs were removed or split.
No new public API, visual representation, default, or interaction model is hidden under the bug-fix label.
Public text and artifacts contain no internal Meta context.

Testing

pnpm vitest run --project ui packages/core/src/utils/pressFeedback.test.ts: the eight cases under "the release ends with its animation, not its clock".
pnpm vitest run --project node scripts/build-css.test.mjs: the overlay's release, capped under reduced motion, on the controller's clock.
With fix(Item): a list row's touch press release runs on the compositor #8077 on an iPhone or the iOS simulator: freeze the page for 0.7 s on the lift and press a list row; the highlight fades through the freeze to the end.

What was run: the unit tests of the press surfaces (utils, Button, Switch, Checkbox, Card, Item, List, RadioList, menus), the stylesheet test, pnpm check:repo and the core type check. These are local runs; no CI run is expected for this pull request.

Vercel's failed deployment on e2c10d2 was on Vercel's side: its build command passes locally on that commit, and #8077's head, which contains it, deployed.

…seudo-element support

The README's busy-main-thread paragraph and busyWindowProof's JSDoc said an undelivered frame is never a miss; when fewer than minJudgedFrames frames were delivered in the judged part, its span counts every frame. One clause in each says so.

…ose finds it The unmount kept the node of the first attach(null) in the task, so after attach(null), attach(next), attach(null) it landed a waiting Reduce Motion move on the node already replaced, and next stayed at its dip's opacity. A dispose right after attach(null) landed on no element, leaving the detached node at opacity 0. The latest detached node is now kept while its unmount is pending; the unmount and dispose both land there. Two tests fail on the previous head.

…that Effect The isEnabled sync's silence covered recognizer listeners but not usePressTracker: a press-tracked control inside an element whose double tap a rerender turns off heard touchUpInside (and its un-highlight) from that layout Effect (react-component-runtime INV2). Silencing it would leave the control highlighted, so the tracker's callbacks that arrive during a sync run in a microtask just after it, in order: the press still ends and un-highlights, outside the Effect. Tests, failing before (the events arrived inside the Effect): a press waiting on an ancestor double tap, alone and with a single tap waiting on it, reports nothing from the Effect that turns the double tap off, then touchUpInside and the un-highlight just after. Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>

…ile it ran A page opened after startCompositorTrace and closed before stop() was still credited: its frames are in the browser-wide record, and neither check saw it. The record now watches for new pages from start to stop, in the page's own context and through the browser's target discovery in every context, and stop() throws if one opened. Negative controls: a page opened and closed mid-record, and one in another context, both make stop() refuse; alone, it records.

…) into n8549

…) into n8446b

…rns to joins that dip Under Reduce Motion a call that names an opacity while an earlier dip's move still waits to land took the dip branch. So a call naming the opacity the dip already returns to, with no travel of its own, opened a second dip from where the first had got to: mid fade out the element faded out twice, and in the dip's own task the browser got a second, identical fade. A swipe row's release does exactly that: its move's layer plays the travel as a dip, then its state layer lands opacity 1 on the same element in the same task. Such a call now joins the waiting dip: the planner returns joins, the fade goes on as it was, the call takes the landing over and settles when the dip ends, and the call it replaces lands with it, each value keeping the call whose move it is. A call that names travel, or another opacity, plans as before. Four tests (the planner's, mid dip, in the dip's task, and a release played then landed) fail on the previous code.

…aiting dip returns to joins that dip; the internal changesets stop counting their users) into the presented start

@eslint-react/naming-convention-ref-name: the test component added in 07b3383 held its refs as outer and inner, two lint errors that failed CI's ESLint step. Renamed outerRef and innerRef; no other change.

Inside a trace, waitForAnimation and watch.started() read the element through handles, which find no element rather than wait for one, so a wait on an element the page removed rejected with "no animation started on the element" instead of "the element is not in the document", unlike the untraced path. At its deadline, a traced wait with no element now rejects as missing. Traced twin of the missing-element self-test; it fails on the previous code. Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>

…med or not The planner's comment on the cross-fade's length said it is not a theme role and no theme lengthens it. Under spec:AST-094 DEC-11 no motion role is themeable: the fade's length is no role at all, and nothing lengthens it.

A promotion keeps the stylesheet's will-change reasons beside its own, and read them with getComputedStyle as it started: in a drag's first move, that forces a style recalculation inside the input handler. The stylesheet's value is now read in a task of its own after the element is attached, and again after each demotion, so a promotion uses what was read. One that comes before that read (an element attached in this task that moves at once) still reads it then. A test that counts style reads in the promoting task fails on the previous code; one for the element that moves at once passes on both.

…orts after that Effect react-component-runtime INV2 keeps caller callbacks out of Effects, and the isEnabled sync and a replaced node's detach did it by silencing every listener for the arena pass they start. A single tap waiting on a double tap recognizes in that pass when the double tap is turned off or its node replaced, so its caller never heard the tap. The hook cases expect that caller to hear it once, just after the Effect, reading the recognized state; the arena case expects GestureArena.deferResolution to fail the stopped recognizer at once and resolve the recognition waiting on it in a pass a microtask later. Fail on this head.

… edges only in their edge zone, an off-zone edge pan decides at 10 px) into the experimental touch layer

…aims an axis only in its edge zone; the promotion's style read in its own task; the planner's DEC-11 line) into the presented start

The isEnabled sync and a replaced node's detach silenced every listener for the arena pass they start (react-component-runtime INV2), so a single tap waiting on a double tap they stopped recognized in that pass and was never reported. Delaying the listener call alone would hand it a recognizer the arena has already reset to possible. GestureArena.deferResolution(body) runs code outside input that stops recognizers without resolving what the stops unblock (the recognitions waiting on them, held touches, resets); a pass a microtask later, at the last event's time, resolves it, or the next input does first. Both hook syncs run inside it, reaching the arena through recognizerInternals: the stopped recognizer's own cancel stays silent, and a recognizer that required it to fail recognizes outside the Effect, where its listener reads the recognized state. The README and the isEnabled option say so.

…rred unmount runs It read will-change right after attach(null), before the unmount's microtask, so it passed while that microtask could still promote the element and leave timers behind. It now awaits the microtask, then checks will-change and that no timer is left. It fails on meta#8521's earlier head (97436b2), before the unmount cleared what the landing rebuilt.

…pseudo-element support

…ith one passive listener and press-time document listeners family:action-groups FR5 (and the AST-094 FR19/FR24 exception proposed with it): the behavior applies to every pointer, mouse and pen included, so a group must hear a press where the primary pointer is fine, where the host otherwise registers nothing. attach() takes { actionGroup: true }: under a fine pointer the group element gets one passive pointerdown listener; a press on it adds document pointermove, pointerup and pointercancel listeners (and window blur, plus the click listener for the click the lift owes), and they go at the release. Only the group's own recognizers and consumer take that press. Under a coarse pointer the host's usual listeners serve the group, as every other recognizer. Tests (failing first): idle under a fine pointer, only the group's one passive pointerdown and nothing for a recognizer that is not a group; a press adds the document listeners and the release removes them; a recognizer that is not a group on the press path takes no part; detach removes the group listener, and a coarse pointer keeps the usual listeners.

… dependency

(1ddea08) into the experimental touch layer

…tion) as a dependency The action group's press filter reads acceptsTouchInput through internals(), as the rest of the gesture host does now that the getter is protected.

…on) into the host line The host keeps both fine-pointer exceptions: perEventPointer (this PR's press-only tracker) and actionGroup (meta#8309's). Conflicts were the two option docs, useGestureRecognizer's option read beside meta#8309's deliver queue, and two test files' neighbouring additions.

… change

…tion constant From review on meta#8890: spec:AST-094 FR4 lists the 200 ms Reduce Motion cap among the touch motion roles and says a component never plays a literal. The release capped its clock at a literal 200 in pressFeedback.ts (REDUCED_MOTION_MAX_MS) and at a literal 200ms in the overlay's reduced release duration. Both now read the shared constant: the controller timing.reducedMotionCrossFadeMs, the stylesheet reducedMotionFadeConsts.duration. Both are 200 ms, so nothing on screen changes; the built stylesheet's cap is still 200 ms. Red first: a unit case that stubs timing.reducedMotionCrossFadeMs at 120 ms found the release still fading at 120 ms on the change before this one; it now ends there.

… change

…Motion constant too The row press layer capped its release under reduced motion at a literal 200ms (CELL_RELEASE_REDUCED), the same cap the review on meta#8890 asked the overlay to read from the shared constant (spec:AST-094 FR4: the 200 ms Reduce Motion cap is a role, never a literal). It now reads reducedMotionFadeConsts.duration, as the overlay does; both are 200 ms, and the built stylesheet's cap is still 200 ms. A unit case holds every reduced-motion cap in the layer and the overlay to the constant. Red first: it found the layer's literal on the change before this one.

… change

… change [skip ci]

meta#8890's own change. The touch press controller ends a release when its animation ends, a descendant's release included when this surface is its nearest press owner, instead of on a clock from the lift, and the release under reduced motion reads the Reduce Motion fade alone. Absorbs meta#8890 (78f233b).

meta#8118's own change. A control's touch press paints on a pseudo-element layer whose opacity the release animates, so the release runs on the compositor; the cards and Thumbnail take the same layer. The release end is meta#8890's (a release ends when its animation does). The overlay keeps its own release curve, so only rows ship the row layer (meta#8077); the next commit leaves FR15's 250 ms out until it is decided. Absorbs meta#8118 (a9fd510).

…#8118 review base

…#8890, meta#8360 045f666) into the press release The release's 250 ms for a finger on a control stays where it was, in the control press layer's CSS, and a mouse's or the Space key's press keeps 200 ms through its input marker. The controller's own profile clock goes with the profiles meta#8117 dropped: the release-end code from meta#8890 waits for the running release animation, so a finger's release still ends at 250 ms. This branch's own copy of that code gives way to meta#8890's.

…caps read the Reduce Motion constant) into the meta#8118 review base

…o the press release The overlay's reduced-motion release stays this branch's own arms, which already read the Reduce Motion constant (reducedMotionFadeConsts); the controller's clock cap and the row layer's take meta#8890's and meta#8077's.

…ase counts when this is its nearest press owner, and meta#8360 d0f5fd5) into the meta#8118 review base

…eta#8360 d0f5fd5) into the press release meta#8890's release end now counts a descendant's release animation when this element is its nearest press owner, so a control whose layer is a child's (a checkbox's box wrapper) keeps `fading` until that layer's release ends. [skip ci]

…he descendant release) into the indicator press layer [skip ci]

meta#8638's own change. The tracker paints its groups' presses through paintPress, the one writer, which now takes an `onFadeEnd` for a `fading` paint: the writer calls it once, when that fade stops being the element's paint, on its release's end (meta#8890's endAfterRelease) or when a later write replaces it. The tracker forgets an action there, so `dispose` ends only its own running fades. Absorbs meta#8638.

…n ends meta#8890's test for another painter's release, with paintPress: a `fading` paint stays until the surface's release animation ends, as the controller's own release does. Fails here: paintPress ends its fade on a clock started at the write.

meta#8890's release end, for paintPress: its `fading` paint waits for the release animation (endAfterRelease), not a clock started at the write, so a busy first frame no longer cuts it short; a write on the element cancels that wait, as it ended the clock.

meta#8638's own change. The tracker paints its groups' presses through paintPress, the one writer, which now takes an `onFadeEnd` for a `fading` paint: the writer calls it once, when that fade stops being the element's paint, on its release's end (meta#8890's endAfterRelease) or when a later write replaces it. The tracker forgets an action there, so `dispose` ends only its own running fades. Absorbs meta#8638. The gestures README says so: the tracker paints its groups' presses with paintPress.

… base

meta#8106's current head: the Reduce Motion fade read on its own (meta#8890), a divided-rows press case (meta#8077) and an interactive spacious case (meta#8085). A clean merge.

cixzhang and others added 30 commits October 26, 2026 14:40

Merge meta#8521 (the unmount's landing leaves nothing running) into p…

fda011c

…seudo-element support

Merge n8045 (the busy docs name the thin-window rule) into n8548

15e8c24

Merge n8548 (the busy docs name the thin-window rule) into n8549

bc90acb

Merge n8549 (the busy docs name the thin-window rule) into n8446b

7aba599

Merge meta#8521 (the latest detached node) into pseudo-element support

a103c43

Merge n8548 (the compositor record refuses a page opened while it ran…

2a6b934

…) into n8549

Merge n8549 (the compositor record refuses a page opened while it ran…

9f65026

…) into n8446b

Merge meta#8076 (2ec969c: a Reduce Motion call naming the opacity a w…

298458e

…aiting dip returns to joins that dip; the internal changesets stop counting their users) into the presented start

test(gestures): the isEnabled-sync press test names its refs as refs

8a1f2ca

@eslint-react/naming-convention-ref-name: the test component added in 07b3383 held its refs as outer and inner, two lint errors that failed CI's ESLint step. Renamed outerRef and innerRef; no other change.

Merge meta#8061 (4c3df94: a screen-edge pan takes the axis across its…

70c70e4

… edges only in their edge zone, an off-zone edge pan decides at 10 px) into the experimental touch layer

Merge facebook#8076 (70c70e4: her facebook#8061 4c3df94, a screen-edg…

7088243

…aims an axis only in its edge zone; the promotion's style read in its own task; the planner's DEC-11 line) into the presented start

Merge meta#8521 (the mid-dip unmount test awaits the microtask) into …

915f9d9

…pseudo-element support

Merge d2c3c78 (meta#8072 (an action group under a fine pointer)) as a…

cc795a1

… dependency

Merge meta#8072 (d2c3c78: the action-group host exception) and meta#8446

266fa0a

(1ddea08) into the experimental touch layer

Merge meta#8309 (cc795a1: meta#8072's action-group fine-pointer excep…

8b0cb36

…tion) as a dependency The action group's press filter reads acceptsTouchInput through internals(), as the rest of the gesture host does now that the getter is protected.

Merge 1ddea08 (meta#8446 (the harness line's latest)) as a dependency

a490ba1

Merge meta#8315 (8b0cb36: meta#8309 cc795a1) into the gesture watcher

6f73653

vjeux added a commit to vjeux/astryx that referenced this pull request Nov 3, 2026

Merge the press release change (meta#8890) into the row press release…

6c36e2f

… change

vjeux added a commit to vjeux/astryx that referenced this pull request Nov 3, 2026

Merge the press release change (meta#8890) into the row press release…

db65416

… change

vjeux added a commit to vjeux/astryx that referenced this pull request Nov 3, 2026

Merge the press release change (meta#8890) into the row press release…

198b6ad

… change

vjeux added a commit to vjeux/astryx that referenced this pull request Nov 3, 2026

Merge the press release change (meta#8890) into the row press release…

a9bd8a8

… change

vjeux added a commit to vjeux/astryx that referenced this pull request Nov 3, 2026

Merge the press release change (meta#8890) into the row press release…

aab75f3

… change [skip ci]

vjeux added a commit to vjeux/astryx that referenced this pull request Nov 3, 2026

Merge meta#8077 (9460fdb: with meta#8890's release end) into the meta…

c1bae1e

…#8118 review base

vjeux added a commit to vjeux/astryx that referenced this pull request Nov 3, 2026

Merge meta#8077 (69f6f0c: with meta#8890 9a0332b, the reduced-motion …

63b6eab

…caps read the Reduce Motion constant) into the meta#8118 review base

vjeux added a commit to vjeux/astryx that referenced this pull request Nov 3, 2026

Merge meta#8077 (43f1690: with meta#8890 c8d496b, a descendant's rele…

1fef066

…ase counts when this is its nearest press owner, and meta#8360 d0f5fd5) into the meta#8118 review base

vjeux added a commit to vjeux/astryx that referenced this pull request Nov 3, 2026

Merge meta#8118 (a9fd510: meta#8077 43f1690 with meta#8890 c8d496b, t…

533e217

…he descendant release) into the indicator press layer [skip ci]

vjeux added a commit to vjeux/astryx that referenced this pull request Nov 3, 2026

Merge the press release change (meta#8890) into the row press release…

9d39666

… base

vjeux added a commit to vjeux/astryx that referenced this pull request Nov 3, 2026

Merge the press release change (meta#8890) into the row press release…

f060f19

… base

vjeux added a commit to vjeux/astryx that referenced this pull request Nov 3, 2026

Merge the press release change (meta#8890) into the row press release…

c575dec

… base

vjeux added a commit to vjeux/astryx that referenced this pull request Nov 3, 2026

Merge the press release change (meta#8890) into the row press release…

a01bb01

… base

vjeux added a commit to vjeux/astryx that referenced this pull request Nov 3, 2026

Merge the press release change (meta#8890) into the row press release…

4ef5359

… base

vjeux closed this Nov 4, 2026

cixzhang mentioned this pull request Nov 4, 2026

fix(core): under a finger a pressable highlights at touch-down, and waits only inside a scroller #9765

Merged

3 tasks done

Navigation Menu

Repository navigation

fix(core): a touch press's release lasts until its fade has played - #8890

fix(core): a touch press's release lasts until its fade has played#8890
vjeux wants to merge 1661 commits into
meta:mainfrom
vjeux:uikit/c11-press-release-end

vjeux commented Oct 29, 2026 •

edited

Loading

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

vjeux commented Oct 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User impact

Problem and solution fit

Expected behavior and authority

Smallest restoration

Evidence

Scope

Testing

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vjeux commented Oct 29, 2026 •

edited

Loading