Content div with -webkit-overflow-scrolling: touch brings problems with absolutely positioned children on iOS devices

Question

We are programming a web application for tablets.

In this application, we have the main content div where our content is placed, some pages / slides have more content than the viewport allows, so we added the following CSS to the content div;

#canvas { height: 100%; width: 100%; overflow: hidden; position: relative; } .content { height: 100%; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; } .absoluteElement { position: absolute; left: 20px; top: 20px; } 

HTML:

 <div id="canvas"> <div class="content"> <div class="absoluteElement">This is absolute!</div> </div> </div> 

This works great on the iPad and on the desktop, but we have some issues with elements with absolute or fixed placement. When we scroll the page on the iPad, elements placed in absolute size also move on the iPad until we separate the screen (by which it returns to its absolute position), but not on the desktop (as it should be). This only happens when the -webkit-overflow-scrolling: touch option is enabled. When we turned off this option, the problems disappeared on the iPad, but the scrolling itself is very slow and inhibited.

For your information, absolute elements (.absoluteElement must be absolute for the #canvas div, not for the content).

How can we solve this easily?