fix(studio): canvas border expands when zooming — switch from CSS zoom to transform scale#810
Closed
miguel-heygen wants to merge 5 commits into
Closed
fix(studio): canvas border expands when zooming — switch from CSS zoom to transform scale#810miguel-heygen wants to merge 5 commits into
miguel-heygen wants to merge 5 commits into
Conversation
miguel-heygen
force-pushed
the
fix/preview-zoom-padding
branch
from
09333bd to
35f64ed
Compare
Adds a subtle outline and drop shadow to the composition stage so it reads as a distinct canvas against the neutral-900 workspace background.
miguel-heygen
force-pushed
the
fix/preview-zoom-padding
branch
from
35f64ed to
cda6d21
Compare
…view The viewport's focus:ring was appearing as a teal border when zooming via Ctrl+wheel. Switch to focus-visible: so the ring only shows on keyboard navigation, not on pointer/scroll focus.
CSS zoom on absolute inset-2 affects layout metrics, causing the canvas to shift/shrink incorrectly at non-100% zoom levels. transform scale is visual-only (no layout side effects) and aligns with the center-origin pan clamping math in clampPreviewPan.
Remove redundant zoom clear on every frame and add will-change: transform so the outline and box-shadow are pre-composited on their own GPU layer instead of repainting on each zoom step.
…d CSS zoom double-scaling getBoundingClientRect() returns visual dimensions inflated by ancestor CSS zoom. When the preview stage has zoom: 2, the player's rect was 2x its layout size, so scaleIframeToFit computed a 2x scale — then CSS zoom doubled it again. offsetWidth/offsetHeight return layout dimensions regardless of ancestor zoom, giving the correct scale at every zoom level. Reverts the NLEPreview writeTransform back to CSS zoom (smooth, native) now that the root cause in scaleIframeToFit is fixed.
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.
Summary
stage.style.zoomwithCSS transform: scale()on the preview stage elementtransformOriginfrom"0 0"(top-left) to"50% 50%"(centre) to match the existing pan-clamping formulaRoot cause
CSS
zoomis a layout property. Changing it at runtime triggersResizeObserveron descendant elements, which causesscaleIframeToFitto re-run withgetBoundingClientRect()values that are already inflated by the zoom factor. The iframe ends up scaled too small relative to the player's visual bounds, and the visible letterbox grows as zoom increases — the "canvas border expands inward" symptom reported in #752.CSS
transform: scale()is visual-only.ResizeObservernever fires on scale changes, soscaleIframeToFitkeeps the scale it computed on initial mount (based on layout dimensions). The parent transform then magnifies the player and composition uniformly, so the composition always fills the player's visual bounds at any zoom level.Test plan
Closes #752