Webkit Overflow Scrolling causing div's not to show?

Question

I have the content of my website in an absolute positioned div that fills the whole screen. The scrolling on this div is normally clunky, as it's not the native momentum scrolling. Solution? Append -webkit-overflow-scrolling: touch; to the div.

Momentum scrolling works now, but when I scroll down the page, the div elements aren't showing up. The console shows no errors, nothing is wrong with the actual page, but the individual posts (the div's) don't show. Here's an example:

Can anyone confirm this on their iPad, or suggest a fix? I'd rather not use something along the lines of Scrollability. It might be that the iOS6 beta is causing this, but I'd like to be reassured.

You can view this site on your iPad

_{And if anyone wants me to explain my bookmarks, I will gladly do so.}

Answer 1

Currently .post CSS class uses position: relative. If you remove that line, the issue goes away. Apparently relatively position elements are hidden when not within the view. Not exactly sure the why the iPad does this or if it is a bug. In my experience, iPad devices try to run as efficiently as possible. For example, if you scroll JS animations are frozen. Perhaps this is a technique to make iPads render pages more efficiently. Hopefully that helps.

This article maybe be related and have a work around: CSS3 property webkit-overflow-scrolling:touch ERROR

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