Fix ECG SVG repaint on Mobile WebKit (remove paint containment; add regression test) - #1974
Conversation
This pull request has been ignored for the connected project Preview Branches by Supabase. |
Warning Review limit reachedYou’ve reached a temporary PR review limit under our Fair Usage Limits Policy. Next review available in:56 minutes Your organization has reached its usage spending cap. Adjust your spending cap in the billing tab. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
Comment |
Uh oh!
There was an error while loading. Please reload this page.
…ress (#2046) * fix(a11y): stop OS Reduce Motion from freezing and hiding answer progress The answer-loading panel was reported dead on a physical iPhone in both Safari and the installed PWA. Three prior PRs (#1974, #1989, #1995) diagnosed it as a Mobile WebKit repaint bug and all three failed on the device. The cause was this app's own reduced-motion CSS: with iOS Reduce Motion on, the universal suppression rule froze every animation on the page (including the step spinner) and the ECG trace was additionally set to `opacity: 0`, so the only progress indicator disappeared entirely. Every gate stayed green because playwright.config.ts applies `reducedMotion: "reduce"` suite-wide while the one spec asserting the animation opts out to "no-preference" first, so the default user configuration was never exercised. The only WebKit project is Desktop Safari; there was no mobile-WebKit coverage at all. Three changes: 1. Suppressing motion no longer deletes the indicator. The reduced-motion rules stop the animation but leave a legible static trace instead of `opacity: 0`. 2. New tri-state Motion preference (System / Reduced / Full). "Full" is an explicit opt-in that overrides an OS Reduce Motion request, because iOS Reduce Motion is commonly enabled for app-launch zoom rather than vestibular sensitivity and there was no in-app way to get the feedback back. Default stays "system", so nobody silently gains motion. The `motion-reduce`/`motion-safe` Tailwind variants are redefined via @custom-variant so the override reaches all 164 call sites. 3. The pulse becomes a travelling sweep. The previous whole-line opacity fade (0.2 -> 1.0 over 1.8s) technically ran but was too subtle on a phone hairline to read as motion. It is now a continuously scrolling ECG strip driven only by `transform: translateX`, reusing the compositor recipe `.animate-skeleton-shimmer::after` already relies on. Adds tests/ui-phone-motion.spec.ts covering the exact reported configuration (phone + OS Reduce Motion), which nothing covered before. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UYndHWrYJzirxbBvt68Tmx * docs(ledger): record phone/PWA animation defect review Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UYndHWrYJzirxbBvt68Tmx * docs(issues): capture phone motion verification follow-ups Four inbox requests from the PR #2046 investigation. They travel with their owning product PR rather than a dedicated ledger-only branch, per the AGENTS.md PR-bundling rule. - P2 issue: playwright.config.ts applies reducedMotion:"reduce" suite-wide, so no gate reflects the default user configuration. That inversion is why three PRs shipped green against a broken phone. - P2 task: no mobile-WebKit or display-mode:standalone Playwright project; phone coverage is a narrow viewport on desktop engines, while the only phone-AND-standalone CSS in the repo goes untested. - P3 task: physical iPhone acceptance still owed for this fix, in Safari and the installed PWA with Motion set to Full. - P3 rec: three dead spring easing tokens in globals.css. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UYndHWrYJzirxbBvt68Tmx --------- Co-authored-by: Claude <noreply@anthropic.com>
Motivation
contain: paint, which can prevent WebKit from repainting animated SVG stroke properties (stroke-dashoffset) on phone devices. The change restores reliable repainting on mobile WebKit.Description
contain: paintfrom.answer-activity-traceinsrc/app/globals.cssso the animated SVG can repaint every frame on WebKit-based browsers.globals.cssdoes not reintroducecontain: paintfor.answer-activity-traceintests/answer-activity-trace-css.test.tswhile keeping the WebKit-safe positive dash-offset keyframes intact.src/app/globals.css,tests/answer-activity-trace-css.test.ts.Testing
npx vitest run tests/answer-activity-trace-css.test.ts— passed (2 tests).npm run test:e2e -- tests/answer-progress-ui-smoke.spec.ts --project=chromium --grep "answer progress keeps focus|follow-up answer generation"— the targeted mobile ECG journeys passed (2 tests).npm run format) and local checks; formatting completed and no style errors remained.npm test): 6,510 tests passed, 1 skipped; 5 unrelated timeout failures occurred in repository hook-related tests (these are unrelated to the ECG change).Codex Task