Game turns black after tab switch.

[Igor Georgiev 16]

Hey guys, I have a weird issue. 

After my game has stayed idle for a while and I am currently using another tab, the game turns black. And the weird thing is that if I switch back to another tab quickly and move back to the game - it fixes itself o_0.

Also on android the game does not want to turn back from black. The buttons in the game are clickable, I believe this is render related, but I have no idea what could it be.

What could be the reason? 
 

[rgk 41]

We need to see the game or some code.
You might want to set game.stage.disableVisibilityChange = true;

[Igor Georgiev 16]

<script>
   ////Game init
    var atlasScaleFactor = 1;

    window.onload = function() {

        /**Determine Screen Size and Device Type*/
        this.w = window.screen.width;
        this.h = window.screen.height;

        if(this.w < this.h)
        {
            this.w = window.screen.height;
            this.h = window.screen.width;
        }
        else if(this.w > this.h)
        {
            this.w = window.screen.width;
            this.h = window.screen.height;
        }

        if(this.w * RatioUtil.getDPR() > 1200)
        {
            atlasScaleFactor = 1;
        }

        if(this.w * RatioUtil.getDPR() < 1200)
        {
            atlasScaleFactor = 0.5;
        }

        if(this.w * RatioUtil.getDPR() < 1000)
        {
            atlasScaleFactor = 0.25;
        }

        /**Determine proper Renderer and Game Dimensions*/
        var deviceRender;
        var forcedTimeOut;

        if(getMobileOperatingSystem() == 'iOS')
        {
            forcedTimeOut = false;
            deviceRender = Phaser.WEBGL;
            this.w = this.w * RatioUtil.getDPR();
            this.h = this.h * RatioUtil.getDPR();
        }
        else if(getMobileOperatingSystem() == 'Android')
        {
            forcedTimeOut = false;
            deviceRender = Phaser.CANVAS;
            this.w = this.w * RatioUtil.getDPR();
            this.h = this.h * RatioUtil.getDPR();
        }
        else if(getMobileOperatingSystem() == 'unknown')
        {
            forcedTimeOut = false;
            deviceRender = Phaser.CANVAS;
            this.w = window.screen.width;
            this.h = window.screen.availHeight;
        }

        console.log(this.w + "X" + this.h + " " + getMobileOperatingSystem());
        /**Create Phaser Configuration Object*/
        var config = {
            "width": this.w,
            "height": this.h,
            "renderer": deviceRender,
            "parent": 'game',
            "transparent": forcedTimeOut,
            "forceSetTimeOut": false
        };

        /**Initialize new Phaser instance*/
        var game = new Phaser.Game(config);
        game.forceSingleUpdate = true;
        /**
         * Determine the mobile operating system.
         * This function either returns 'iOS', 'Android' or 'unknown'
         *
         * @returns {String}
         */
        function getMobileOperatingSystem() {
            var userAgent = navigator.userAgent || navigator.vendor || window.opera;

            if( userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) )
            {
                return 'iOS';

            }
            else if( userAgent.match( /Android/i ) )
            {

                return 'Android';
            }
            else
            {
                return 'unknown';
            }
        }

        /**Add Game States*/
        game.state.add('Boot', Game.Boot);
        game.state.add('Preloader', Game.Preloader);
        game.state.add('MainMenu', Game.MainMenu);
        game.state.add('GameMachine', Game.GameMachine);

        /**Start Booting*/
        game.state.start('Boot');
    };

This is in my index.html
And this is the create function in boot
 

        this.game.renderer.renderSession.roundPixels = false;
        this.game.input.maxPointers = 1;
        this.game.stage.disableVisibilityChange = true;
        this.game.scale.setUserScale(1,1);
        this.game.plugins.add(Fabrique.Plugins.InputField);

I had the disableVisibilityChange = true. 
Do you see any other problems?

[Igor Georgiev 16]

10 hours ago, rgk said:

We need to see the game or some code.
You might want to set game.stage.disableVisibilityChange = true;

forgot to quite you in the previous post

[rgk 41]

Have you tried changing the forceSetTimeOut and game.forceSingleUpdate? I'm not sure if will do the trick though.

[Igor Georgiev 16]

11 hours ago, rgk said:

Have you tried changing the forceSetTimeOut and game.forceSingleUpdate? I'm not sure if will do the trick though.

After I changed them, on desktop it seems fixed, but on mobile - nothing.

[Igor Georgiev 16]

handleIncorrect: function()
{
    if(!this.game.device.desktop)
    {
        document.getElementById("turn").style.display="block";
    }
},

handleCorrect: function()
{
    if(!this.game.device.desktop)
    {
        document.getElementById("turn").style.display="none";
    }
}