BUG (and solution): canvas is duplicated on Android 4.1.1 (default Browser) when orientantion change

[Fabio Biondi]

Hi guys,

some weeks ago I notified you a bug on Android 4.1.x default browser:

"the onPress and onClick events were dispatched twice"
https://groups.google.com/forum/?fromgroups#!topic/createjs-discussion/15YvyKfv5DM

Now another bug: when I change orientation the Canvas is duplicated creating a lot of problems,

I found some info here:

http://stackoverflow.com/questions/13071528/html5-canvas-issues-on-android-4-1-1

and here:

http://code.google.com/p/android/issues/detail?id=41312#makechanges

To fix this issue there are many ways: in my case I have removed "overflow:hidden" from my body and everything magically works.

I'm still debugging right now but it seems that the double click issue of my previous post is fixed too.

Hope it's useful : )
Fabio

[Fabio Biondi]

Update:
I'm sorry but the fix above doesn't work and I have tried a lot of other ways with no results. The bug always happens.

I spent hours to debug this issue (and many other people got it) and here my results:

1) the problem is only on Android 4.1.x and 4.2 using the default browser (on tablets and smartphones). Chrome works well.
2) When I rotate the Android device it seems the stage is not cleared  so I have duplicated stuff.
It happens when I change the canvas size (i.e. canvas.width = XXX).

3) I have also tried to manually clear the stage after the orientantion change using stage.clear() or the standard canvas sintax (clearRect(x,y,w,h). Nothing!

The only workaround I really found to avoid this strange behaviors was forcing to refresh the whole page when the device is rotated (on Android devices, OS >= 3, default browser).

It's not a real solution but at least users won't see weird stuff on their screen.

Fabio

[Radek Bartoň]

I think it is related to issue with setInterval() [1]. For some reason Android WebView can't clear canvas from asynchonous functions. Is it possible to call (queue for calling) a function on WebView main thread from asynchronous function?

[1] http://code.google.com/p/android/issues/detail?id=37529

[Максим Зубков]

I don't think this is related to timeouts, it's just that everyone uses timeouts with canvas :) The same (I guess) issue here code.google.com/p/android/issues/detail?id=35474 has ugly but working workaround with opacity.

[Felix Zhou]

It's great help for me. saved my day!!!