Hardware acceleration in CSS3

Hardware acceleration in CSS simply means using the power of the GPU to render a page. But most of the time the rendering is done by the CPU whereas only some portions are rendered by the GPU.

So what triggers the GPU? The following things make the GPU do work:

  • Using position:fixed for boxes.
  • When content is overlapped one over the other.
  • When using CSS filters like blend modes, reflections, alpha transparency and opacity.
  • Whenever 3D transformations are used.
  • Wherever intense painting occurs. For example, in <video> or <canvas> tags.

Hardware acceleration is good to use if the device has enough GPU to handle it (which devices these days have in abundant). For example, if you style some content, normally it would be the CPU who will render it. But if you simply add transform: translate3D(0,0,0); it will trigger the GPU and it will be rendered using the GPU. Using opacity and filters will to cause the GPU to come into action. But beware, if you haven’t added 3D transformations initially and you add it on some event trigger (say, mouse click), the rendering will be transferred and some flickering can occur on the screen (which would displease the user).

After all, it’s up to you how to render the page. Using the GPU consumes the device’s power so think twice when using it on some mobile device.


Your Thoughts -

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s