Issue with DOM elements not resizing based on browser zoom level

[banjahman]

I have a pretty large game that is built on the canvas with createjs in angular. It's set up in a way that allows the game to scale based on the users device pixel ratio so it renders clearly on mobile devices. I have implemented this library to provide accessibility to the game, and it works really well.

I noticed an issue whenever the user zooms in with the browser. When this happens, the DOM elements that sit behind the canvas don't actually resize.

I created a small repo here that demonstrates the problem - https://github.com/banjahman/createjs-ada-test/tree/main

You can see when the zoom level is 100%, the DOM elements will be in the right place. If the zoom is higher (say 150%), the DOM elements remain in the same position and do not update.

To remove any additional complexity, I've tried testing this on initial page load with the browser zoom set to 100% and 150% to ensure the resize listener isn't affecting it.

Let me know if you need any more information, it's a bit of a tricky scenario. I tried to make the example as small as possible while still retaining the logic I'm using the scale the canvas.

Here are some images showing what I'm saying

Default zoom level (100%). DOM elements are in the right place.

zoom level 150%. DOM elements are not expanding

[drosenberg123]

Hi @banjahman thanks for bringing this to our attention. Working on getting this in front of the right people on our end. Stay tuned.

[banjahman]

@drosenberg123 I had some time to do some more debugging on this, I found the issue starts in 1.5.0. Version 1.4.0 is not exhibiting the problem when the zoom levels change.