Jump to content

Samsung canvas rendering freeze on touch


inductible
 Share

Recommended Posts

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 B) 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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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);}
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...