Repository navigation
web: Fix canvas sizing with CSS-driven layout and container resizes - #170
Merged
Merged
Conversation
When the canvas is embedded in a container styled with
`#lux-canvas { width: 100% !important; height: 100% !important; }`, the
rendered CSS size is driven by the surrounding layout and can change
without a window resize. The old listener only watched `window.resize`
and our inline `style.width/height` was overridden by the user CSS,
so the backing store went stale. That stretched the framebuffer
(squashed buttons) and `offsetX * dpr` no longer matched the rendered
size (wrong hitboxes).
- Attach a `ResizeObserver` to the canvas and route both window and
observer events through a shared `handleResize` that reads the
post-layout size from `getBoundingClientRect`.
- Map pointer coordinates via `getBoundingClientRect` + `canvas.width/
height` so the scale factor is derived from the DOM on every event
and stays correct even mid-resize.
- Skip inline `style.width/height` in `Init` when the caller didn't
request an explicit size, so embedding CSS controls layout.
- Emit an initial `OnResize` from `Run` so the app's first frame has
the actual framebuffer size.
|
Thank you for your contribution to lux! Before we can merge this pull request, we need you to agree to the Contributor License Agreement (CLA). It grants the Project the rights needed to distribute your contribution under both the noncommercial and commercial licenses. I have read the CLA Document and I hereby sign the CLA You can retrigger this bot by commenting recheck in this Pull Request. Posted by the CLA Assistant Lite bot. |
3 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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
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
This PR fixes canvas sizing issues when the canvas is embedded in a container with CSS-driven layout (e.g.,
width: 100% !important). The changes address two main problems:Incorrect size detection during initialization: The code was using
clientWidth/clientHeight, which round to integer CSS pixels and don't account for transforms or container-imposed sizing. Now it usesgetBoundingClientRect()which reflects the actual rendered size.Missing resize detection for container changes: When a container resizes (e.g., window resize, parent layout change), the canvas wasn't being notified. Now a
ResizeObserverdetects CSS-driven size changes, complementing the existing window resize listener which only catches DPR changes.Stale inline styles fighting CSS layout: When no explicit size was configured, the code was still setting inline pixel values that would conflict with container CSS. Now inline styles are only set when an explicit size is requested.
Incorrect pointer event coordinates: The
canvasPos()function was usingoffsetX/offsetYwhich don't account for CSS transforms or when the rendered size diverges from cached values. Now it derives coordinates fromgetBoundingClientRect()and scales them to backing-store pixels.Type of change
Testing
Checklist
CONTRIBUTING.mdhttps://claude.ai/code/session_01EAVzQWyPG186aRQoR1AHfF