CODEWITHSUNDEEP
androidioscssanimationhardware-acceleration
Bram Vanroy
Bram Vanroy

Reputation: 28505

Enabling hardware acceleration: translate3d

As David Walsh briefly discusses, it is possible to force hardware acceleration with a zero-based translate3d property in CSS.

It works like this:

.animClass {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;

    /* more specific animation properties here */
}

I'm still not convinced whether I should start using this technique. I am using many transitions on my responsive website, though none will run simultaneously, and I am hoping to deliver a smooth experience to older devices as well as high-performance ones.

My questions, then, are:

  1. Does the technique above improve the execution of transitions such as opacity, width and position (left, right, top, bottom)? And should the above properties.
  2. How cross-browser is this? I'm not interested in IE8 and lower, but especially mobile Android, iOS and Windows Phone devices ought to benefit from this. What code is there to be added for more compatibility?
  3. Should the hardware-enabling code be added to every element that has the transition property? If so, is there a way to right it into a simple SASS mixin that can be used easily?

Upvotes: 5

Views: 2453

Answers (2)

Johan Sundén
Johan Sundén

Reputation: 447

  1. I can say generally (according to my own experiences) it improves speed and performance (especially in web views on Android and iOS) if used wisely. Applying hardware acceleration to all elements can be counter productive, especially on devices with lesser memory.

I use it a lot when rendering images and I need to push up the quality so that the images are not blurry, and forcing the devices to cache the whole images. Android often "cuts of images" when parts of it are outside of the viewport. But be careful, applying hardware acceleration when running on Android on to many elements can make the application crash. The same rules applies to iOS also (even if iOS has better performance in web views, so you "can do more").

  1. It works cross browser but needs to be prefixed. On Android I use it down to 4.2.

  2. As I said, use it wisely. Apply it to a class and then only set the class to specific elements that needs to be hardware accelerated. When not needed anymore, remove the class.

So use it only when you need to, and only on the elements that needs it at the current moment. Be careful to apply it to a lot of elements at the same time. What limit of number of elements is hard to say. But because of the browser memory it will be different on desktop/iOS/Android etc.

Don't animate with position, instead use translate, that will boost up the performance of the animation (especially on devices).

I wouldn't remove hardware acceleration on my application, because then it would perform a lot worse :)

Upvotes: 2

feeela
feeela

Reputation: 29932

An hint to the third part:

You should keep in mind that browsers already optimize the layout and design animations. Forcing hardware acceleration to each animated element is counter-productive as you cancel any browser optimizations with this. You should always use proper tools to measure your websites rendering performance before even thinking about using such hacks.

In short: browsers are getting smarter and smarter with each new version and you – as a single person – can't be more clever than a whole bunch of developers who sometimes work for years on a rendering engine.

Upvotes: 4

Related Questions