Samsung canvas rendering freeze on touch

[inductible]

Hullo, I'm talking along the same lines as the following:

 

http://developer.samsung.com/forum/board/thread/view.do?boardName=GeneralB&messageId=235672&frm=7&tagValue=HTML5&curPage=1

 

Basically, on a range of Samsung devices I have here (Android 4+, stock browser), any touch interaction stops DOM redraw and canvas rendering, until a) the touch is moved by a small distance (at which point rendering continues, even whilst touch is still down) or the touch is ended (finger removed from screen).

 

I have never found a workable solution to this issue, which I've been faced with now on four projects, and sunk countless hours into it.

 

Does anyone on this forum have any experience or anecdotes relating to this issue? There's so little info on the web about it, which is very surprising, because it's such a critical game-breaker of a problem. 

 

I know that Chrome is (now finally) the default browser in Android 4.4+, but there's a *lot* of people out there that strangely still swear by the (Samsung bastardised) stock offering...

[1-800-STAR-WARS]

There's no easy workaround, as far as I know, it's a pain in the arse, that's for sure. There're plenty of other bugs in the browser too, for example rotating the device (and sometimes even without rotating the device) frequently breaks the clearRect operation, pasting a sort of 'cached' image in the rectangle instead of clearing it. You can work around that bug by setting the canvas element's CSS opacity property every frame, but that does cut the framerate a bit.

[alex_h]

Oh cool, thanks for the info regarding the css opacity workaround - I've been looking into what to do about that issue recently but didn't find a workable solution. Out of interest what do you normally look for in a userAgent string to try to catch the relevant stock browser versions? I have a system in place for this but I can't remember offhand what my search string is and I'm not convinced of how accurate it is.

[1-800-STAR-WARS]

'534.30' is what I use - think I got it from a StackOverflow thread

[alex_h]

My CSS is pretty feeble, can I check what the syntax for the opacity setting would be in javascript?

I'm guessing something like this:

canvas.style.backgroundColor = "rgba(255, 255, 255, 0)";

Is that right? My canvas is transparent as the game background is displayed behind it, I'm not sure if that is related to the css property here though. I'm assuming I want to set the opacity to zero regardless?

 

I'm planning to set something up so that when in the stock browser I trigger my game to run this command on update for 2 secs after every orientation change, that way it's not constantly draining performance. Not sure if this will work but it seems worth a try! I've been able to replicate the issue in the android emulator so hopefully I'll soon know.

 

[EDIT] - or looking elsewhere on stack overflow maybe I should use

canvas.style.opacity = 0;

is that it?

[1-800-STAR-WARS]

Yup - that might work. In our tests though, it was pretty unreliable unless you just call it on every frame. We ended up doing this, which slows down performance a bit, but seems to clear up all the rendering problems:

if (window.navigator && window.navigator.userAgent.indexOf('534.30') > 0) {    // Clear the canvas a different way because they are using a known-bad version of the default android browser    canvas.style.opacity = 0.99;    setTimeout(function() {        canvas.style.opacity = 1;    }, 0);}

[alex_h]

Thanks, that's helpful. With my plan of running the opacity change for 2 secs after an orientation change I found in the simulator that even though I still saw the canvas doubling happen occasionally, when I rotated the device again it did seem to go away. So that seems like progress! Thanks again.