CODEWITHSUNDEEP
androidjqueryscrollhtml5-canvaseaseljs
D G
D G

Reputation: 80

Poor performance upon scrolling a canvas within a div on android

my first time asking a question here, this site is very helpful, I just couldn't find the answer to my problem.

Please bear with me, I will explain myself fully before presenting my question :)

I am working on a html5 game that runs on desktop, and on mobile devices as an app.

In a part of the game, I have a 1500 x 1200 canvas that is rendered to once, and it is placed somewhere in the DOM, within a div that is smaller, which allows scrolling the canvas within that div.

This works exceptionally well on Desktop and iOS mobile. But it doesn't run very well on Android. By poor performance I mean it takes a second or two for the touch to get registered, and then the canvas lags behind as the finger moves to scroll it.

I have done much research and a lot of testing:

-I was able to improve performance a bit by turning off easeljs and related scripts temporary, but the rest of the app needs this. -Further performance was gained by removing bindings off of $(document) and other elements. But still, Android performance didn't match that of iOS and Desktop.

Eventually, I gained near Desktop performance when the canvas element was .removed() and appended to html 'body' instead. Why is this? I obviously cant have it this way in the game, but I need to re create this performance increase somehow.

Here is what is even more perplexing. Again removing and appending that same Canvas element BACK to where it was in the DOM, is now still far better in terms of performance. It now scrolls much smoother with less touch input lag. Can someone give hints or explain why this is so?

What are the possible causes of this sort of behavior?

//edit: More explanation about my question. What are some major performance hits on Android when scrolling an element? Too many events firing on touch? Element too deep in DOM? Too much CSS in DOM? EaselJS not playing nice?

Thank you

Upvotes: 0

Views: 1329

Answers (1)

Erik Reppen
Erik Reppen

Reputation: 4625

I feel your pain. Since much of it's pretty much black magic at this point, the best I can do is relate similar experience and offer suggestions:

  • The DOM, keep it as simple as possible. I usually keep it pretty clean. I had all kinds of scrolling problems due to some unnecessary CSS statements left-over from a different layout approach. So clean up thoroughly any time you change something.

  • Be real careful with overflow. I had a lot of problems with my first phonegap app due to overflow. For some reason Android has a hard time with overflow in anything but the html element. I believe this is related to fixed positioning as well as Android <= 2 couldn't do either (no, no scrolling in a non- tag - seriously). I also had some redundant overflow statemenents (see previous point) that just nuked performance.

  • Try scrolling that canvas element on the actual HTML tag. Just recently I switched an animated canvas element from being in content that scrolled in the HTML element to being content of a scrolling div element and ran into very similar issues to the ones you're having. I'll verify here if moving back to the old way fixes everything. This wouldn't fix my real problem either but at least it would narrow down the issue.

  • Probably not related but for scroll on swipe situations, far too many swipe libraries clobber scroll performance by nuking default behavior via <event object>.preventDefault()

  • And if in your tweaking you run into issues with momentum scrolling (no inertia when you flick things), see webkit-overflow-scrolling-touch for a fix that helped me out with iOS issues. Here's one decent link on that: http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

  • Also, Android's web view canvas implementation stinks really bad and scrolling is surprisingly obnoxious on all mobile devices

Upvotes: 1

Related Questions