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!