Pointermove issue after scrolling on mobile page in 3.60.0 version #6489
Description
Version
- Phaser Version: 3.60.0 version
- Browser: Google Chrome browser 112.0.5615.138 (official build) (64-bit)
Description
I wrote an inquiry on the forum and got a response to open an issue in the Github repository.
Create a mobile environment using developer mode in the Chrome browser.
The dimension is iPhone SE (375*667).
When the page loads for the first time, the canvas will pop up with a black screen.
If you touch the canvas with the pointer, ‘pointermove’ will be written in the Console tab of Chrome Developer Tools.
Then, scroll down and drag the black canvas slightly below the center of the screen with the pointer.
The ‘pointermove’ will be taken when dragging the top of the canvas and not when dragging the bottom of the canvas.
On my website, my canvas game will be placed where it will require a lot of scrolling on the page.
I also tested with phaser version 3.55.2 and it worked fine. And in version 3.55.2, if you drag from a black screen to a white screen, then ‘pointermove’ is also recorded. The pointermove event area seems to be wider.
Please fix. 🙏
Example Test Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>test</title>
<style>
body {
margin: 0;
}
</style>
<script src="lib/phaser.min.js"></script>
<script>
class Scene extends Phaser.Scene {
preload() {
}
create() {
this.input.on('pointermove', () => {
console.log('pointermove');
});
}
update() {
}
}
const WIDTH = 320;
const HEIGHT = 480;
const config = {
type: Phaser.AUTO,
parent: 'minigame',
scale: {
parent: 'minigame',
mode: Phaser.Scale.NONE,
width: WIDTH,
height: HEIGHT
},
physics: {
default: 'arcade',
},
fps: {
forceSetTimeOut: true,
target: 60
},
scene: [Scene]
};
const game = new Phaser.Game(config);
</script>
</head>
<body>
<div>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<div>
<div id="minigame">
</div>
</div>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1>
</div>
</body>
</html>