ScaleManager miscalculates mouse position should the canvas move on the page without changing size

[jameswilddev]

Version

• Phaser Version: 3.55.2

• Operating system: macOS 11.6

• Browser: Google Chrome 94.0.4606.81 (Official Build) (x86_64)

Description

When mouse pointer locations are converted from page space into canvas space, ScaleManager.transformY is called which uses a cache of the canvas's dimensions.

This information is refreshed in ScaleManager.updateBounds.

This is triggered (via ScaleManager.refresh) though multiple means such as:

• Startup.
• Switching to/from full-screen mode
• On an interval (every 500msec).

In the case that the canvas's width or height are adjusted by surrounding DOM or style changes, the interval will trigger a refresh of this cached bounding box.

However, it calls into getParentBounds to determine whether its cache is stale, which only checks width and height, not that the position of the canvas on the page has changed.

Therefore, if the canvas is moved on the page without altering its size (for example if it is below a collapsible section which is expanded or collapsed) Phaser is unaware that the canvas has moved and all mouse input is offset until the window is resized.

Example Test Code

https://codepen.io/jameswilddev/pen/xxLqVKr

This will show a simple rectangle which changes color when the mouse hovers over it.

After two seconds, an input will be added further up the page which shifts the canvas down approximately 25px.

After this point, all mouse input is offset vertically by the same amount; you can trigger the color change by hovering over the area above the rectangle, but the bottom 25px of the rectangle no longer triggers a color change.

Additional Information

Nothing to add.

[photonstorm]

Thank you for submitting this lovely detailed issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.