CSS3 property webkit-overflow-scrolling:touch ERROR

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 sc

Answer 1

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:

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