Skip to content

fix(webkit): interpolate translate so panel swaps slide instead of popping - #826

Merged
robsongajunior merged 3 commits into
mainfrom
fix/tab-view-panel-translate
Jul 29, 2026
Merged

fix(webkit): interpolate translate so panel swaps slide instead of popping#826
robsongajunior merged 3 commits into
mainfrom
fix/tab-view-panel-translate

Conversation

@gabriel-lisboa-azion

Copy link
Copy Markdown
Collaborator

Summary

The shared panel transition listed only transform, opacity. Tailwind v4 compiles translate-x-* to the standalone translate property (translate: var(--tw-translate-x) var(--tw-translate-y)), and its .transform utility no longer covers translation — it composes only rotate/skew. So the slide offset was never interpolated: the panel snapped to its final position while only the fade played, and the swap read as a pop. Tailwind's own transition-transform expands to transform, translate, scale, rotate for exactly this reason.

Adding translate to the list fixes it. The preset is shared, so this also fixes the Calendar month strip that renders through it.

Tests

Full webkit suite green (83 files / 1693 passing, 6 skipped), eslint + vue-tsc clean.

<Transition> is stubbed by Vue Test Utils, so the rendered animation cannot be asserted from a test. The new test pins the css contract behind it instead — that the transition list names translate, not just transform. Verified independently in real Chromium that without the fix a mid-flight sample already sits at its final value.

This is deliberately a contract test rather than a class-string assertion: the value under test is the return of getTabViewPanelTransitionStyle(), a public preset, not a Tailwind class on some element.

Visual regression

No baseline movement expected. The runner freezes animations to 1ms and screenshots the settled state, so a slide and a pop are pixel-identical once settled — which is precisely why this defect needed a unit-level contract test to be caught at all. The 12 existing components-navigation-tabview--* snapshots should come back unchanged; if any of them move, that is a signal worth investigating rather than a baseline to accept.

No regeneration dispatch needed.

Notes

  • Merge this before fix/calendar-field-parity. That branch restructures the Calendar month strip to slide, and it renders through this preset — without this fix the month swap still reads as a fade. Both are independently correct and green, so the order only affects whether the Calendar animation lands complete.
  • Adds the panel change row to the tab-view spec's animation table, which had no entry for it.
  • No new dependency. No breaking change.

…pping

The panel transition listed only `transform, opacity`. Tailwind v4 compiles
`translate-x-*` to the standalone `translate` property - its `.transform`
utility now composes only rotate/skew - so the slide offset was never
interpolated: the panel snapped to its final position while the fade played,
and the swap read as a pop. Tailwind's own `transition-transform` expands to
`transform, translate, scale, rotate` for exactly this reason.

Adds `translate` to the list. The preset is shared, so this also fixes the
Calendar month strip that renders through it.

<Transition> is stubbed by Vue Test Utils, so the rendered animation cannot be
asserted; the new test pins the css contract behind it instead. Verified in
real Chromium that a mid-flight sample sits at its final value without the
fix.
@robsongajunior
robsongajunior merged commit 0f8bc2c into main Jul 29, 2026
23 checks passed
@robsongajunior
robsongajunior deleted the fix/tab-view-panel-translate branch July 29, 2026 17:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants