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;    
}

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;    
}

• javascript
• jquery
• css
• webkit
• mobile-safari

• 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'. – Gerben Commented Dec 22, 2011 at 21:11
• Thank you, Gavin. This suits me. Is there any way I can mark your ment as the answer to this question? – FreeCandies Commented Dec 22, 2011 at 23:32

4 Answers 4

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);

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

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 e to a halt.

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

I'm pretty darn sure I just solved this with:

overflow-y: auto;

Add that to your scrolling element.

(Presumably just overflow: auto; would work too depending on your needs.)