fix(animated-theme-toggler): use percentage clip-path coordinates for view transition#990
Merged
Yeom-JinHo merged 1 commit intoJul 20, 2026
Conversation
… view transition Chrome 150 renders absolute px clip-path coordinates on ::view-transition-new(root) without applying the display scale factor on the first transition after page load, so on fractional scales (e.g. Windows 150%, devicePixelRatio 1.5) the first wipe starts at the wrong position — both coordinates land at exactly value/1.5 (magicuidesign#989). Express the whole clip-path geometry (circle center/radius and all polygon vertices across every variant) as percentages of the snapshot reference box instead of px. Percentages are resolved relative to the reference box, so they stay correct regardless of how Chrome scales the snapshot, on the first and every subsequent transition. Viewport denominators switch from visualViewport to innerWidth/innerHeight to match the reference box, which includes classic scrollbars. No visual change in unaffected browsers: the percentages resolve to the same geometry the px values produced. Fixes magicuidesign#989 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RDrm9vajALhxeHspRH68jj
|
@Yeom-JinHo is attempting to deploy a commit to the product-studio Team on Vercel. A member of the Team first needs to authorize it. |
2 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #989
Problem: Chrome 150 renders absolute px clip-path coordinates on
::view-transition-new(root)without applying the display scale factor on the first view transition after page load. On fractional display scales (Windows 150%,devicePixelRatio1.5) the first wipe starts at exactlycoordinate / 1.5— confirmed by the reporter's environment details in the issue. Subsequent transitions are fine; Firefox is unaffected.Fix: Express all clip-path geometry (circle center/radius and every polygon vertex across all 7 variants) as percentages of the snapshot reference box instead of px. Percentages resolve relative to the reference box, so they stay correct regardless of how Chrome scales the snapshot. Viewport denominators switch from
visualViewporttoinnerWidth/innerHeightto match the reference box (includes classic scrollbars).No visual change in unaffected browsers — the percentages resolve to identical geometry.
Verified: keyframe values and frame-by-frame wipe position checked on Chrome 150 (macOS, native DPR 2 and forced DSF 1.5) for circle + polygon variants; typecheck + registry rebuild pass. The actual bug environment (Windows + 150% scale) can't be reproduced on macOS — @jimfaster, could you verify this preview against your setup?
🤖 Generated with Claude Code
https://claude.ai/code/session_01RDrm9vajALhxeHspRH68jj