Maximize Performance of Overflow Content Using Hardware Acceleration [Video]

How-to

Here’s a quick tip for developers that want to implement HTML5 lists (or other scrolling content) with performance in mind. Most often, this involves leveraging the overflow: scroll; CSS property on a container. As you’ll see in the embedded video though, performance can be a concern.

The reason for this is that the container housing the content isn’t hardware accelerated by default; we can fix this simply by adding the -webkit-overflow-scrolling: touch; CSS property and instantly see the improvements:

  • Smoother scrolling and support for much larger content sets.
  • Visual bounce effect when scrolling at the edges of the list.
  • More responsive touch / tap interactions.

It’s incredible; the difference that hardware acceleration makes. With one CSS flag you can leverage the power of the GPU within your applications too!

Join the conversation

Show comments Hide comments
+ -