Infinite scroller has jitter on iOS

[paulirish]

smfr, webkit's compositing/scrolling expert, indicated there is some jitter on iOS with the demo, at the moment.

cc @surma @flackr

[surma]

We are scrolling inside an element and don’t have -webkit-overflow-scrolling: touch; because of side-effects. IIRC @flackr was mentioning that we could move to scrolling on body soon-ish.

[flackr]

We do have -webkit-overflow-scrolling: touch;, there are no side effects on this page.
https://github.com/GoogleChrome/ui-element-samples/blob/gh-pages/infinite-scroller/styles/messages.css#L6

We are scrolling inside an element because that prevents us from creating a large solid color layer for the document body. The scrolling contents layer is actually completely transparent (draws nothing) because all of the items within are composited which means that it doesn't incur any layer cost.

I hadn't noticed any jitter on iOS but I clearly need to play with it more. I suspect that it may be because we're very aggressively setting the scroll position to what we think it should be, which could cause rounding errors on a high dpi display while smooth scrolling?

[rniwa]

It looks like setting scroll position is conflicting with the rubber banding effect. You can see the jitter as you rubber band upwards at the top when there are more than one viewport height worth of contents.