Maximize Performance of Overflow Content Using Hardware Acceleration [Video]

Erik O. — Fri, 04 Jan 2013 14:07:42 +0000

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!

BlackBerry Developer Blog » Hardware Acceleration

Maximize Performance of Overflow Content Using Hardware Acceleration [Video]