« Back to blog

Hmm, the iPad doesn't seem to handle overflow scrolling nicely...

Just tried to render a web page with overflow: scroll components for touch scrolling on an iPad.  Awful performance.  At least this seems to make it better:

http://mobile.tutsplus.com/tutorials/mobile-web-apps/ios-5-fixed-positioning-and-content-scrolling/

 

Here's a quick example, I wired up in Rails.

If you browse to the following links on an iPad, the scrolling performance is bad:

http://denniskuczynski.com/tests/mobile_tables/table_style

http://denniskuczynski.com/tests/mobile_tables/ul_style

However, once -webkit-overflow-scrolling : touch, is added to the scrolling container, performance is much better.

 

http://denniskuczynski.com/tests/mobile_tables/table_style?overflow=true

http://denniskuczynski.com/tests/mobile_tables/ul_style?overflow=true

See the source here:

https://gist.github.com/1888038 (Using tables)

https://gist.github.com/1888047 (Using unordered list items)

 

Note that, adding complicated HTML and CSS within these scrolling tables will start to degrade the scrolling performance, so the table HTML should be kept as simple as possible.