Question

I have a UIWebView with a list of images

<ul>
<li> <img src="foo"></li> 
<li> <img src="foo"></li> 
<li> <img src="foo"></li> 
</ul>

Originally it seemed to work fine when I didn’t style it, but now that I have wrapped the images in a div and added some css styling to make position:relative or absolute it won’t render during scrolling.,

<ul>
<li>
  <div class="stylish"><img src="foo"></div>
</li> 
<li>
  <div class="stylish"><img src="foo"></div>
</li>
<li>
  <div class="stylish"><img src="foo"></div>
</li> 
</ul>

nothing shows up until scrolling completely stops. And then it flashes into view immediately.
So it looks like if I have any html elements with a position absolute or relative, it won’t render until the scrolling is completely finished stopping. Oddly enough removing the position attributes from the css allowed the elements to render on scroll. Using a javascript library like iScroll also fixed the problem, but iScroll is much jerkier than native momentum scrolling on iOS.

Is there anything I can do to have it render or show as it scrolls, maybe even have it start rendering on deceleration or something rather than having to wait for it to completely stop?

Answer 1

Based on experimentation, UIWebView will not render anything during scrolling that does not have a css position property of “static”. Relative and absolute will both cause the elements to not render until the scroll is completely stopped.