Jump to content

Breaking Mobile Web Browsers for Fun and Profit


DesertEagle
 Share

Recommended Posts

Hi there,

I was tremendously impressed with the performance of the PixiJS example applications on my various mobile phones and tablet devices. I have not had nearly that level of performance when using KineticJS.

 

Accordingly, I decided to make my own stress test using the starter tutorial on Pixi and the GSAP tweening framework. 

 

The stress test is here:

http://visualtimeline.elasticbeanstalk.com/testRig.html

 

Performance is mostly buttery smooth in Desktop Chrome and Firefox, with minor (OS related?) herky-jerkiness on occasion. 

 

Firefox on Android is pretty slow (not a huge surprise). 

Chrome on Android is very inconsistent (surprising - Using a Samsung Note 3). 

Safari on the Apple 5c is buttery smooth. 

 

Is this a fair test? Or did I do something really suboptimal from a coding standpoint? It's true I'm not using the minified versions of anything, and the Pixi version is Dev.

 

If it is a fair test, I'm curious as to what I'm doing that puts the performance so far outside of the example apps on Android. Any help is greatly appreciated.

Cheers,

Travis

 

 

 

Link to comment
Share on other sites

Ok. Updated version here:

http://visualtimeline.elasticbeanstalk.com/testRig3.html

 

Runs buttery smooth on everything except non-Chrome Samsung Internet browser, in which it exhibits a series of 'trails' and strange rendering artifacts. Not sure why the Samsung browser isn't clearing the screen properly now, but it looks like removing GSAP solved the main (lag related) issue. 

 

Thanks!

Travis

Link to comment
Share on other sites

Samsung stock browser has definitely had issues with clearRect. I'd be interested to hear what other means you are using?

 

If the canvas render is not transparent we are now using fillRect instead. We found it much faster and it also plays nicer with the new alpha property that modern canvas' support. 

Link to comment
Share on other sites

...( slaps forehead ) ... of course!  :rolleyes:

 

thanks for that! So thinking about it, I've tended to use a transparent canvas with a background applied to the game div through css in order to reduce the canvas draw calls. But perhaps any performance gain from this might actually be lost through the costs of having a transparent canvas and calling clearRect on it. I guess I'd better do some testing to find out.

Link to comment
Share on other sites

  • 3 weeks later...

Hi All,

the latest build of Pixi (both dev and regular versions) seems to break Chrome on my Android Phone (Galaxy Note 3). 

http://visualtimeline.elasticbeanstalk.com/testRig3.html

 

As well, the Samsung stock android browser remains broken. 

 

I've tried using both 'getAnimFrame' and 'setTimeout' but doesn't seem to make a difference. Any idea what's causing this behavior?

 

Works fine in:

Mobile Firefox

Safari

Chrome on PC

Firefox on PC

 

Thanks,

T.

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