Resize issues with Phaser

[AlgoGames]

I have been trying Phaser for past couple months and thought of learning it by making a bunch of Solitaire games. All well and fine and games are functioning decently well. I am facing issues with making the game load in a smooth manner. I created the game for a big canvas 1920 px and am using Bootstrap to fit the game into the available space. I do the maths to correctly adjust width or height of the game before it is initialized and then pass the parameters to initialize the game and load states. The issue is that the game loads initially with the full size and then resizes it on the screen which kind of jumps and flickers and does no way look smooth.

Just try to load the game  http://www.onlinesologames.com/klondike

You will notice how its resizing the canvas and also notice the vertical scrolling to the right which is pretty visible for a good couple seconds or more.

I am using ScaleManager and SHOW_ALL to automatically resize and the code is pretty standard.

        game.stage.backgroundColor = 0x008000;
        game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        game.scale.pageAlignHorizontally = true;
        game.scale.pageAlignVertically = true;
        game.scale.setScreenSize = true;
        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.state.start("Loading");

In order to give it a smooth load effect I tried a couple things. I have tried to set the background color to match the HTML background color and then change the color after the actual game starts loading. That does not fix the problem as the scrolling will still show up for a couple seconds and screen will flicker. Then I tried to hide the entire canvas area and then unhide it using jQuery (something like $("#mygame").fadeIn(500)) after I have preloaded the assets and am going to start game state. The problem still stays and it doesn't matter at what stage I unhide the game canvas, it first loads the game in full size then scales it back to the available space. I am looking for your experience in how to handle this if anybody has faced this problem before and if there is something in Phaser which can elegantly resolve this. If you want to look at how the two approaches behave in reality, I can deploy it and share the URL's.

[AlgoGames]

I just wanted to post an update to this. I eventually ended up using CSS and setting overflow-y property to hidden which completely hides the temporary vertical scrolling. I can then use java script to remove overflow-y property later on which I needed in certain scenarios. Doesn't look like an elegant solution but works for now.