6

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:

enter image description here

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.

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
Charlie
  • 11,380
  • 19
  • 83
  • 138
  • On my iPad the divs do show, but they go invisible *while* scrolling. When the scroll halts to a stop, the elements reappear – Hubro Jul 22 '12 at 02:37
  • What iOS version are you running? Mine are invisible after the viewport, but only certain div elements (as you can see, the footer to each post is visible). – Charlie Jul 22 '12 at 02:38
  • Mine's doing the same thing as CodeMonkey. I'm running iOS simulator, iOS version: 5.0 – Sean Thompson Jul 22 '12 at 03:50

1 Answers1

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

Community
  • 1
  • 1
Jason
  • 4,079
  • 4
  • 22
  • 32