fix: Dom Container on scaled canvas #11400
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR fixes the incorrect positioning of DOM elements on a scaled canvas by incorporating a scale factor into the transform.
- Updated the transform style to combine translation and scaling
- Calculated the scale factor based on canvas CSS height, actual height, and renderer resolution
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
src/dom/DOMPipe.ts
Outdated
| const scale = (parseFloat(canvas.style.height) / canvas.height) * this._renderer.resolution; | ||
|
|
||
| // scale according to the canvas scale and translate | ||
| this._domElement.style.transform = `translate(${canvas.offsetLeft}px, ${canvas.offsetTop}px) scale(${scale})`; |
There was a problem hiding this comment.
Do we not need to also check the width here?
const scaleX = (parseFloat(canvas.style.width) / canvas.width) * this._renderer.resolution;
const scaleY = (parseFloat(canvas.style.height) / canvas.height) * this._renderer.resolution;
// scale according to the canvas scale and translate
this._domElement.style.transform = `translate(${canvas.offsetLeft}px, ${canvas.offsetTop}px) scale(${scaleX}, ${scaleY})`;|
Could we have a test for this? |
…ixijs into fix/dom-container-scale
…nvas scaling transformation
yes! test added 👍 |
|
It would be great if the Right now it's hardcoded to Suggested improvement: Current workaround: const domContainer = document.querySelector('div[style*="z-index: 1000"]');
if (domContainer) {
(domContainer as HTMLElement).style.zIndex = '10';
}
|
Description of change
This change fixes an issue in
DOMPipewhereDOMContainerelements would not be positioned correctly if the parent canvas element was scaled using CSS properties likewidthorheight.Previously, the container
divfor DOM elements was only translated based on the canvasoffsetLeftandoffsetTop. This fix introduces scaling to the containerdiv's transform. The scale factor is calculated based on the ratio of the canvas's CSSstyle.heightto itscanvas.height, multiplied by the renderer's resolution. This ensures that the DOM elements align correctly with the PixiJS scene, even when the canvas itself is scaled via CSS.Pre-Merge Checklist
npm run lint)npm run test)