CSS3 property webkit-overflow-scrolling:touch ERRO

Question

iOS 5 released web designers a new property -webkit-overflow-scrolling:touch that uses the iOS devices hardware accelerator to provide native scrolling for a scrollable div.

When implemented on our site in development it does work but not well. I believe there may be a CSS issue hence I ask here.

The following fiddle will show you it working perfectly

If you pop over to our site in development you will find the same panel under facilities tab but on iOS although the scrolling is perfect the overflowed section is not shown with pictures literarily chopped in two.

http://www.golfbrowser.com/courses/mill-ride/

I have no idea how to fix this http://www.golfbrowser.com/photo.PNG

Answer 1

I have run into this bug as well. I fixed it by applying the following css to parent elements:

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

However, I have noticed that that slows down rendering and might select other input elements than wanted when a touched input element is scrolled into the center of the view (by Safari/iOS).

Answer 2

In iOS, when an element inside an element with -webkit-overflow-scrolling: touch set is positioned absolutely (or fixed) relative to an element outside of the scrolling container, the element is rendered only once and the rendering is not updated as the element is scrolled. Sample HTML:

<div class="relative-to-me">
  <div class="scrollable">
    <div class="absolutely-positioned">
    </div>
  </div>
</div>

If you force a re-render by changing a CSS property (in the inspector for example), you can see that the element's positioning is re-rendered into the correct location. I suspect this is a result of some performance features to optimize scrolling performance.

The solution to this problem is to set will-change: transform on the absolutely (or fixed) positioned element.

.absolutely-positioned {
    will-change: transform;
}