Click events don't work on full screen

Click events don't work on full screen
0

When switching to full screen, the appearance changes correctly, but the button click event does not work correctly. It seems that the buttons are placed in different places. What can I do to make the game work properly on full screen?

Full screen switching was done with the following code.

const canvas = document.getElementById ("GameCanvas");
cc.screen ['requestFullScreen'] (canvas, () => {});

The version is v2.1.2 and the platform is Web Mobile.

You should not switch to fullscreen in this way. Please use cc.view.enableAutoFullScreen(true)

It worked fine with enableAutoFullScreen, but this was not the cause.

If requestFullScreen is executed for the HTML element with id = “Cocos2dGameContainer”, and cc.view.setDesignResolutionSize and cc.view.setFrameSize are specified with appropriate arguments, they will work correctly!

The following code is excerpted for reference.

    public static init(): void {
        if (!this.isInitialized) {
            this.containerElement = document.getElementById("Cocos2dGameContainer");
            this.conainterInitialWidth = this.containerElement.clientWidth;
            this.conainterInitialHeight = this.containerElement.clientHeight;
            if (window.parent.screen.width / window.parent.screen.height < this.defaultCanvasWidth / this.defaultCanvasHeight) {
                this.isPortrait = true;
                this.frameWidth = window.parent.screen.width;
                this.frameHeight = window.parent.screen.width * this.defaultCanvasHeight / this.defaultCanvasWidth;
            } else {
                this.isPortrait = false;
                this.frameWidth = window.parent.screen.height * this.defaultCanvasWidth / this.defaultCanvasHeight;
                this.frameHeight = window.parent.screen.height;
            }
            this.isInitialized = true;
        }
    }

    public static requestFullScreen(): Observable<void> {
        this.init();

        return new Observable(observer => {
            cc.screen["requestFullScreen"](this.containerElement, () => {
                if (cc.screen["fullScreen"]()) {
                    cc.view.setDesignResolutionSize(this.conainterInitialWidth, this.conainterInitialHeight, cc.ResolutionPolicy.SHOW_ALL);
                    cc.view.setFrameSize(this.frameWidth, this.frameHeight);
                    this.changeCanvasStyleForFullScreen();
                } else {
                   cc.view.setDesignResolutionSize(this.defaultCanvasWidth, this.defaultCanvasHeight, cc.ResolutionPolicy.SHOW_ALL);
                   cc.view.setFrameSize(this.defaultCanvasWidth, this.defaultCanvasHeight);
                   this.resetCanvasStyle();
                }
            });
        });
    }

Thank you for the advice.