Background color of stage not working in chrome for android

[Xoriff]

Hi, I've started using Pixi for a little project that I'm working on and so far I'm liking it.

 

But when I tried opening it up in my Galaxy Nexus' browser (I'm using chrome), the stages background color doesn't seem to come through.

 

I've created a jsfiddle that demonstrates the problem here: http://jsfiddle.net/PeA8j/1/

 

On my desktops browser and the stock android browser the result window shows a small green stage.  But in chrome on my phone it shows nothing.  If I add sprites to the stage it shows those.  Just not the background color.  Any ideas?

[rich]

Probably related to the Android clearRect / fillRect bug? What version of Android is it? (search this forum for the clearrect bug, it's highly annoying!)

[Xoriff]

Hmmm, searching as you suggested, the best likely hit was this: http://www.html5gamedevs.com/topic/114-canvasclearrect-bug-in-android-stock-browser/

 

But that seems to indicate that the problem is with the stock android browser.  But in the stock browser, it works just fine, only in the android chrome app does it not set the background color.

 

I'm running cyanogenmod 10.1.3-toro (android 4.2.2).

[rich]

It should be easy to confirm - just write a script that does nothing but create a canvas and then apply a background colour to it via the css background property and see what happens, as that's all Pixi does internally unless in WebGL mode.

[Xoriff]

Ok.  Did some more sleuthing.  I mimicked what Pixi does in PIXI.CanvasRenderer.prototype.render to set the backgroundColor style on the canvas element and it works correctly.

 

Furthermore, it seems like it works when I do this through Pixi so long as I comment out the three lines that follow this backgroundColor style setting.

i.e. 

this.context.setTransform(1,0,0,1,0,0); this.context.clearRect(0, 0, this.width, this.height)this.renderDisplayObject(stage);

 

I don't know what it is about what these three lines are doing, but when any of them run, it clears the background color in chrome on my android. 

 

I've confirmed that this issue is specific to android chrome.  This fiddle demonstrates the issue: http://jsfiddle.net/QnFH3/2/

 

Apparently in nearly all browsers, messing with a canvases context does not cause that canvas to ignore it's backgroundColor style.  But in android+chrome, doing anything with the context for the canvas makes chrome abandon it's backgroundColor property.  Not sure how this could be gotten around.

[rich]

Curious to know if this still works: stick the canvas in a div, set the background color of the div.

 

Alternatively I guess instead of a clearRect you could just do a fillRect in whatever colour you needed.

[Xoriff]

Yup, setting the background color of the container div made it such that messing with the canvases context did not cancel out the background color.

 

So, I guess a fix to this could be for pixi to insert a div-nested canvas instead of a naked canvas and use that outer div for styling and such.  Though I have no idea how much work that would entail or if it's even possible.

 

In the mean time I'll just do this manually for my current project.

 

Thanks for the help.

[rich]

That's very useful to know though. I'm guessing it's quite an edge-case, as in not that many games really have plain background colours that aren't part of an image somehow. But at least there is a solution.

[xerver]

Yup, setting the background color of the container div made it such that messing with the canvases context did not cancel out the background color.

 

So, I guess a fix to this could be for pixi to insert a div-nested canvas instead of a naked canvas and use that outer div for styling and such.  Though I have no idea how much work that would entail or if it's even possible.

 

In the mean time I'll just do this manually for my current project.

 

Thanks for the help.

 

This is not something we will do in PIXI, but it is pretty easy to do yourself outside the library.