Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue with fullscreen api #4352

Closed
ngdevr opened this issue Feb 9, 2019 · 7 comments
Closed

Issue with fullscreen api #4352

ngdevr opened this issue Feb 9, 2019 · 7 comments

Comments

@ngdevr
Copy link

ngdevr commented Feb 9, 2019 •
edited

OS: Windows 8.1
Browser: Google Chrome
API version - 3.16.1

I am using following code to enter and leave fullscreen

    handleFullScreen() {
        if (this.scale.isFullscreen) {
            this.scale.stopFullscreen();
        } else {
            this.scale.startFullscreen();
        }
    }

This function is called on a button click. This works fine and can enter as well as exit fullscreen mode when I use the button but if I use "esc" key to exit fullscreen mode then it no longer works. Debugging it in console gives following error


phaser.min.js:1 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.
    at initialize.getFullscreenTarget (http://localhost:8080/test/js/phaser.min.js:1:405372)
    at initialize.startFullscreen (http://localhost:8080/test/js/phaser.min.js:1:404881)
    at TheGame.handleFullScreen (http://localhost:8080/test/js/game.js:150:24)
    at initialize.h.emit (http://localhost:8080/test/js/phaser.min.js:1:10074)
    at initialize.processUpEvents (http://localhost:8080/test/js/phaser.min.js:1:627540)
    at initialize.update (http://localhost:8080/test/js/phaser.min.js:1:622087)
    at initialize.updateInputPlugins (http://localhost:8080/test/js/phaser.min.js:1:429636)
    at initialize.queueMouseUp (http://localhost:8080/test/js/phaser.min.js:1:432154)
    at onMouseUp (http://localhost:8080/test/js/phaser.min.js:1:420581)

Further debugging shows that opening fullscreen mode is inserting a DOM element which is deleted on exit fullscreen mode but if "esc" key is used to exit fullscreen mode, then that element is not getting deleted so next time trying to open fullscreen mode fails.
@BigZaphod
Copy link
Contributor

I see this same behavior on macOS / Safari.

@rgk
Copy link
Collaborator

rgk commented Feb 9, 2019

A fix to this is to set a parent property of the scale object in the game config like this:

config = { scale: { parent: 'parent' ... } ... };

@ngdevr
Copy link
Author

ngdevr commented Feb 10, 2019

I already have parent property set in the game config, still this error occurs.

@rgk
Copy link
Collaborator

rgk commented Feb 10, 2019

The scale part of the config needs its own parent option. I can confirm without it, this error happens and with it, it does not when paired with the correct parent.

@ngdevr
Copy link
Author

ngdevr commented Feb 10, 2019

This is what I have in my game config. Please advise what do you think needs a change here

    let config = {
        type: Phaser.AUTO,
        scale: {
            parent: 'mygame',
            mode: Phaser.Scale.RESIZE,
            width: '100%',
            height: '100%'
        },
        backgroundColor: 0x000000,
        scene: TheGame
    }

    let game = new Phaser.Game(config);

Html body is simply defined as

    <body>
        <div id="mygame"></div>
    </body>

@photonstorm
Copy link
Collaborator

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.

@ngdevr
Copy link
Author

ngdevr commented Feb 16, 2019

The error is gone but there is another issue. "Esc" key works fine in case of FIT mode but in RESIZE mode, it sends wrong width and height (which is the fullscreen width and height) so now the game cuts off in RESIZE mode. Pressing "Esc" key will not resize the RESIZE mode game to new width and height. It works fine in both modes when it is done via a button click.

@AdamXA AdamXA mentioned this issue Dec 30, 2019
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@photonstorm @BigZaphod @rgk @ngdevr