When resize canvas , there is a white background flickering

I resize canvas with a simple standalone function , like this :

function resizeCanvas(width, height) {
    game.canvas.width = width;
    game.canvas.height = height;
    game.canvas.style.width = width / game.resolution + 'px';
    game.canvas.style.height = height / game.resolution + 'px';
}

And when game bootup , I do something like this :

game.renderer = new PIXI.WebGLRenderer(
    game.canvas.width,
    game.canvas.height,
    {
         view: game.canvas,
         backgroundColor: 0x000000,
     }
);

// recompute viewport size & canvas size with  browser window size 
game.scaler.update();  

// resize  renderer with new size.
game.renderer.resize(game.viewportWidth, game.viewportHeight);

the test case is very simple : draw a small png image.

Browser: Chrome 55 for macOS 10.12

Safari is OK.

I know maybe this is a issues of Chrome , but I hop there is a hack way for fix it.

Thanks

[inukshuk]

Aw, thanks! @mickdekkers that’s awesome, calling render immediately makes it work with the ResizeObserver callbacks.

[mickdekkers]

@inukshuk in my case the solution turned out to be really simple: just call render after resizing.

app.renderer.resize(width, height)
// Immediately render because resizing clears the canvas
app.render()

This fixed the flickering issue for me. Keep in mind that if you have animations running, it will just display the last frame until your next update loop and this might give a “freezing” effect. If you want to keep it running smoothly, you’ll want to call your update function before calling render.