Pointermove issue after scrolling on mobile page in 3.60.0 version

Phaser 3
1

It seems that the pointermove area is not updated when scrolling the page to which the canvas belongs in the mobile version browser.
I placed the canvas in the middle of the scrolling page.
When scrolling does not occur when entering the page for the first time, the canvas is located at the bottom edge of the page, and at this time, the pointermove event of the input occurs well.
Next, when the scroll is moved to the middle of the page, the canvas comes to the center of the page. At this time, when I touch on the canvas, the pointermove occurs in the upper area of the canvas and the pointermove does not occur in the lower area.
Please solve it.

2

:wave:

Need a test case to reproduce the problem.

1 Like
3

Thanks for the reply.
Below is the source I tested.
The process was performed in the Google Chrome browser, and the Google Chrome browser version is 112.0.5615.138 (official build) (64-bit).

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 answer about my question.

<!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>
5

Thanks, I reproduced this. You could open an issue on the GitHub repository.

6

Thank you for answer. Is there any way I can do it in the current version?

7

I don’t know what’s causing the problem. :frowning:

8

I downloaded the source from the phaser github repository and opened it.
I modified one part and tested it and it seems to work well.

The file path is ‘src/input/InputManager.js’ and the line number is 617.

Before edit

var element = document.elementFromPoint(changedTouch.pageX, changedTouch.pageY);

After edit

var element = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);

Please review.

1 Like
9

You could make a PR or add that to the issue on GitHub.