Skip to content

fix(OrbitImages): prevent responsive scale flash on mount and refresh#971

Merged
DavidHDev merged 1 commit into
DavidHDev:mainfrom
achelie:feat/fix-orbit-images-responsive-flash
May 28, 2026
Merged

fix(OrbitImages): prevent responsive scale flash on mount and refresh#971
DavidHDev merged 1 commit into
DavidHDev:mainfrom
achelie:feat/fix-orbit-images-responsive-flash

Conversation

@achelie
Copy link
Copy Markdown
Contributor

@achelie achelie commented May 27, 2026

Summary

Fix OrbitImages briefly rendering at the wrong size when responsive={true}.
On mount and remount (e.g. demo Refresh), the component initially used scale=1 before ResizeObserver updated it to the correct value, causing a visible zoom-in-then-shrink flash.

Solution:

  • Initializes scale as null instead of 1
  • Measures container scale in useLayoutEffect (before paint)
  • Hides the scaling layer with visibility: hidden until scale is ready
  • Applies transform only when scale !== null
  • Uses pathWidth / (scale ?? 1) for safe stroke width in non-responsive mode
  • Updates all 4 variants (JS-CSS, JS-TW, TS-CSS, TS-TW) and registry JSON files

Fixes #970

Before (bug):

Before.the.repair.mov

After (fix):

After.repair.mov

Test plan

  • Open /animations/orbit-images locally
  • Click Refresh multiple times — no zoom-in/zoom-out flash
  • Reload the page (F5) — same result
  • Verified on desktop; no console errors
  • All 4 component variants updated
  • Registry outputs for OrbitImages regenerated

@DavidHDev
Copy link
Copy Markdown
Owner

Thanks for the fix!

@DavidHDev DavidHDev merged commit 3e13f4a into DavidHDev:main May 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG]: OrbitImages flashes oversized on mount/refresh when responsive is enabled

2 participants