2

I've a web application (HTML/CSS/JS) that "transitions" between different screens - the screen are reasonably complex - having many elements on them. Actually, it's very like http://beta.usatoday.com/ except it goes up and down as well as left to right. (And it is probably slightly less complex).

So I'm using CSS3 transitions to manage the sliding between the views. On my machine they are smooth and beautiful, and the application looks really good. However, on older machines, the experience is much less satisfying. e.g. a Core2Duo laptop with integrated graphics - around 3 years old. On this, I get really jumpy transitions, and the transitions take a really long time. They are set with a duration of 0.3s, however, on the older machines, they take 4/5 seconds.

So my questions are:

  • What can I do to improve the smoothness on older hardware?
  • If I can't, is there a way to fallback based on the hardware (or by measuring the transition actual duration) so I can just set position?
Chris
  • 1,241
  • 1
  • 14
  • 33
  • You could use http://modernizr.com/ , take a look at it. – Nelson Sep 18 '12 at 12:09
  • 1
    Yes, but the old machine is still using the latest chrome, so feature-wise there isn't an issue - the browser supports it - it just doesn't deal with it very well – Chris Sep 18 '12 at 12:52
  • 1
    You can't access hardware info from javascript, see this question http://stackoverflow.com/questions/3289465/get-number-of-cpu-cores-in-javascript , as an exceptional case if your page is aimed only at chrome you could use http://code.google.com/p/nativeclient/ to gather hardware info. – Nelson Sep 18 '12 at 13:13
  • I'm not so much interested in detecting hardware, as the actual duration of the transition - the subjective measure is of more importance. Also, chrome-only isn't an option. – Chris Sep 18 '12 at 15:19
  • Look at this http://stackoverflow.com/questions/10283734/how-to-measure-browser-layout-performance , also maybe you could use javascript localstorage to measure duration, and if detect slow transition switch back to lightweight animations. – Nelson Sep 18 '12 at 15:49

1 Answers1

1

For some browser versions and mobile browsers there's a bug in webkit that makes transitions very laggy. One of the fixes that's worked for me is to add:

-webkit-transform: translate3D(0, 0, 0);

Another solution had to do with how backface-visibility was rendered during transitions. The fix for that was to add the following, even if the backface wasn't previously altered.

-webkit-backface-visibility: hidden;

Without seeing your code it's hard to say whether these will help, but give em a try (and obviously sub in the appropriate prefix for the browser).

monners
  • 5,174
  • 2
  • 28
  • 47