Looking for a reliable way to test CSS transition performance on mobile devices [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 9 years ago.

Improve this question

I'm building a feature-rich mobile website with jquery mobile. Accross all views there is some css transitions, box-shadows, gradients...

What I'm concerned about is users with lower-grade phones browsing my website. Plenty of phones support transitions but will display them at a terrible framerate: I'm thinking older Androids, first iPad, etc. So for this kind of hardware, I want to disable them (as well as box shadow which is very expensive).

Right now what I'm doing is apply this rule depending on user agent:

* {
      box-shadow: none !important;
      -webkit-box-shadow: none !important;
      transition: none !important;
      -webkit-transition: none !important;
      moz-transition: none !important;
      -ms-transition: none important;
      -o-transition: none !important;
   }

However this is totally unreliable: a phone with Android 4 will pass the user agent test yet might perform terribly. Not to mention users can upgrade their version of Android or even use custom roms on old hardware. And finally, they can always change their user agent.

Another test I've been suggested is starting a width/height transition on an empty page, then check if it completed in time. Altough I can see this working, I'm not sure how reliable that would be since general use involves much more elements in the DOM.

I would like to add that I don't make heavy use of CSS3 effects and I've built this website with optimisation in mind, so please don't suggest optimisation or hacks like backface-visibility, I know of that.

Answer 1

There are several solutions but I would presume you need a solution that runs only on a client device.

If this is the case then use this:

First you will need to download/use Modernizer: http://modernizr.com/

You can use it to detect which devices have support for newer HTML5/CSS3 options. What you need to check is: Inline SVG support, you will find it detectable in an official documentation here: http://modernizr.com/docs/#features-html5

Older versions of Android (pre 3.0) and iOS (pre 5.0) don't have a support for it, find it here: http://caniuse.com/#feat=svg-html5

This is only reliable client side solution I know. If you need much more specific detection you will need to use server side detection. Currently best one is WURFL but it will cost you.

Read more about it in my other answer.