Pointermove issue after scrolling on mobile page in 3.60.0 version

hyewonjo commented 1 year ago

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. :pray:

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>

Gathaa commented 1 year ago

hello , maybe you should add a styling for canvas to have a fixed position and a higher z-index value to ensure it is always on top , about this function :{ this.input.topOnly = false; this.input.setDefaultCursor('pointer');} => this will make sure that the canvas will be detectable anywhere in the screen regardless of the positionning of the pointer.

class Scene extends Phaser.Scene { preload() {} create() { document.querySelector('canvas').style.cssText = 'position: fixed; z-index: 1000;'; this.input.topOnly = false; this.input.setDefaultCursor('pointer'); this.input.on('pointermove', () => { console.log('pointermove'); }); } update() {} }

pip8786 commented 1 year ago

I'm having the same issue. It seems he solved it here in the thread: https://phaser.discourse.group/t/pointermove-issue-after-scrolling-on-mobile-page-in-3-60-0-version/13208 and offered a fix but didn't submit a PR.

photonstorm commented 9 months ago

Thank you for submitting this 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.

phaserjs / phaser