Single finger scroll in Safari not rendering html until scroll finishes

Question

In a mobile web application I have a div which can be scrolled with the new fancy -webkit-overflow-scrolling: touch. The only problem is that the content is being rendered only when the scrolling finishes. Is there a way to make Mobile Safari (and maybe other mobile browsers, like that one in Android) render the html during single finger scroll?

.layer-content {
  position: absolute;
  top: 112px;
  bottom: 0;
  width: 100%;
  background: #e6e6e6;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;    
}

Answer 1

You can work around this by using hardware acceleration. Try adding the following CSS to elements inside .layer-content:

-webkit-transform: translate3d(0,0,0);

Answer 2

Not really. That is just the way the iPhone works. If you scroll, all resources are used to make the scrolling very smooth, at the expense of not showing the new parts. You could maybe fool the browser into thinking the layer is bigger, by making it bigger, and add a layer on top of the part you don't want to show, but this doesn't work for all layouts. I would just leave it be. Users are used to it, as normal pages have the same 'rendering issue'.

Answer 3

The position: absolute is messing with the rendering. The Mobile Safari will not render elements that does not have the standard value for positioning, until the scrolling have come to a halt.

If the position is auto (the default value), Mobile Safari will render the element as you scroll.