Skip to content

fix(studio): canvas border expands when zooming — switch from CSS zoom to transform scale #810

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
miguel-heygen wants to merge 5 commits into from
+11 −4
Closed

fix(studio): canvas border expands when zooming — switch from CSS zoom to transform scale #810

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cda6d21
feat(studio): add canvas boundary and workspace background to preview
miguel-heygen May 13, 2026
af1c33c
fix(studio): suppress focus ring on pointer/scroll interaction in pre…
miguel-heygen May 13, 2026
36e4950
fix(studio): use transform scale instead of CSS zoom for preview stage
miguel-heygen May 13, 2026
8d7b679
perf(studio): promote preview stage to GPU layer for smooth zoom
miguel-heygen May 14, 2026
e5398dd
fix(player): use offsetWidth/offsetHeight in scaleIframeToFit to avoi…
miguel-heygen May 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions packages/player/src/iframe-dom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,13 @@ export function scaleIframeToFit(
compositionWidth: number,
compositionHeight: number,
): void {
const rect = playerElement.getBoundingClientRect();
if (rect.width === 0 || rect.height === 0) return;
const scale = Math.min(rect.width / compositionWidth, rect.height / compositionHeight);
// Use offsetWidth/offsetHeight (layout dimensions) instead of getBoundingClientRect(),
// which returns visual dimensions inflated by ancestor CSS zoom. Using the zoomed rect
// would double-scale the iframe when an ancestor has CSS zoom applied.
const width = playerElement.offsetWidth;
const height = playerElement.offsetHeight;
if (width === 0 || height === 0) return;
const scale = Math.min(width / compositionWidth, height / compositionHeight);
iframe.style.width = `${compositionWidth}px`;
iframe.style.height = `${compositionHeight}px`;
iframe.style.transform = `translate(-50%, -50%) scale(${scale})`;
Expand Down
5 changes: 4 additions & 1 deletion packages/studio/src/components/nle/NLEPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,7 @@ export const NLEPreview = memo(function NLEPreview({
<div className="flex flex-col h-full min-h-0">
<div
ref={viewportRef}
className="relative flex-1 flex items-center justify-center p-2 overflow-hidden min-h-0 outline-none focus:ring-1 focus:ring-studio-accent/40"
className="relative flex-1 flex items-center justify-center p-2 overflow-hidden min-h-0 outline-none focus-visible:ring-1 focus-visible:ring-studio-accent/40 bg-neutral-900"
tabIndex={0}
aria-label="Composition preview"
onPointerDown={handlePointerDown}
Expand All @@ -279,6 +279,9 @@ export const NLEPreview = memo(function NLEPreview({
zoom: toDomPrecision(initial.zoomPercent / 100),
transform: `translate(${toDomPrecision(initial.panX)}px, ${toDomPrecision(initial.panY)}px)`,
transformOrigin: "0 0",
outline: "1px solid rgba(255,255,255,0.3)",
outlineOffset: "0px",
boxShadow: "0 4px 32px rgba(0,0,0,0.7)",
}}
data-testid="preview-zoom-stage"
>
Expand Down
Loading