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!

About Erik O.

HTML5 Application Development Consultant at BlackBerry.

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus