CODEWITHSUNDEEP
javascriptjquerycsswebkitmobile-safari
FreeCandies
FreeCandies

Reputation: 1113

Single finger scroll in Safari not rendering html until scroll finishes

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

Upvotes: 6

Views: 4726

Answers (4)

David Notik
David Notik

Reputation: 2086

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

Upvotes: 0

Jack Read
Jack Read

Reputation: 41

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

Upvotes: 4

Mathias Vielwerth
Mathias Vielwerth

Reputation: 223

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.

Upvotes: 1

Gerben
Gerben

Reputation: 16825

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

Upvotes: 2

Related Questions