Webkit overflow scroll causing div not to show?

Question

I have the content of my site in an absolute positioned div that fills the entire screen. Scrolling on this div is usually awkward, as it is not scrolling the native impulse. Decision? Add -webkit-overflow-scrolling: touch; in the div.

Now scrolling scroll works, but when I scroll down the page, div elements are not displayed. The console does not show errors, nothing happens with the actual page, but individual messages ( div ) are not displayed. Here is an example:

Can anyone confirm this on their iPad or suggest a fix? I would prefer not to use something along the scroll lines. It is possible that iOS6 beta is causing this, but I would like to be reassured.

You can view this site on your iPad.

_{And if someone wants me to explain my bookmarks, I will do it with pleasure.}

Answer 1

The .post CSS class currently uses position: relative. If you delete this line, the problem will disappear. Apparently, relatively position elements are hidden when they are not within the view. Not quite sure why the iPad is doing this, or if it's a mistake. In my experience, iPad devices try to work as efficiently as possible. For example, if you scroll through JS animations, they will be frozen. Perhaps this is a method to make iPad pages more efficient. Hope this helps.

This article may be related and work: CSS3 property webkit-overflow-scroll: tap ERRORS

Using '-webkit-overflow-scrolling: touch' hides content when scrolling / dragging