Pixi.js: Pixi 4 flickering on Silk browser

[GopherwoodTodd]

When running a pixi example in the Silk browser on a Kindle Fire the canvas flickers. We don't experience this on any other platforms or browsers.

You can see it using this example:
https://pixijs.github.io/examples/#/basics/basic.js

[ivanpopelyshev]

Ok, so there are some switches you can try:

First is "antialias". I dont know why, but it forces browsers to behave differently as a side effect.

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb , antialias: true });

Second is preserveDrawingBuffer which eats the performance but affects rendering process seriously. Use with antialias.

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb , antialias: true, preserveDrawingBuffer: true });

Third is calling "renderer.gl.flush" just after rendering process is finished. Not related to antialias hack.

Either call it after "Render" if you use simple renderer

renderer.render(stage);
renderer.gl.flush();

Either hack the app render method

app = new Application(...,. { autoStart: false }) ;
app.render = function() {
    this.renderer.render(this.stage);
    this.renderer.gl.flush();
}
app.start();

[GopherwoodTodd]

Thanks, the perserveDrawingBuffer change fixed it. Tried it without the antialias flag and it worked that way too, so only have the one.

[ivanpopelyshev]

What about single antialias? Dont forget there's performance hit with preserveDrawingBuffer. Do not enable it on other devices/browsers ;)

[GopherwoodTodd]

Antialias by itself didn't fix the problem.

Yeah, we've limited it to just the Silk browser. It is a significant framerate hit.

[ivanpopelyshev]

Good luck! Write us more issues!

What about gl.flush() ? I just dont have that device and i hope to know the answer if anyone else asks me.

I've modified my code, it wasnt correct

[glomotion]

Hey there,
I've also been noticing this on and off, in Chrome too. Funnily enough, adding { transparent: true } to the renderer fixes it for me.

[mafsays]

{ transparent: true } also fixes problem in Silk browser on Kindle Fire for me, without the performance impact of preserveDrawingBuffer - nice one : )

[ivanpopelyshev]

"transparent" has a performance impact but its small compared to preserveDrawingBuffer.

Thanks, @mafsays

[Tigerwulf]

Reopen #4639

[guinunez]

I have been months trying to solve this problem, it was on Chrome on Huawei, and { transparent: true } solved it. Thanks a lot

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.