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

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’.