22

I had previously been using iScroll plugin but wanted to drop it for the native behaviour.

The initial implementation was using

webkit-overflow-scrolling: auto;

however I updated this to ...

webkit-overflow-scrolling: touch

.. to enable the motion/inertia on the touch scroll.

The issue with this is the list items contained within the navigation disappear completely when scrolling, and only return once the momentum has come to a rest.

An example of this can be seen here

justinavery
  • 2,596
  • 2
  • 19
  • 21
  • I've been told that this has been listed as a bug already with webkit. Can anyone else confirm this? I can't seem to find it in the bugzilla list. – justinavery Nov 16 '11 at 02:04

6 Answers6

17

I have had the same problem in the past, if you need to use positioned elements try adding -webkit-transform: translateZ(0); to the elements or the container. This property often forces the browser to use hardware acceleration and with the extra power your images will most likely not disappear. It worked for me anyway.

More useful stuff here too: http://www.html5rocks.com/en/tutorials/speed/html5/

josh3736
  • 139,160
  • 33
  • 216
  • 263
Mark Napthine
  • 171
  • 1
  • 2
  • Helped! I put it on the element which has the `-webkit-overflow-scrolling:touch` and it "cured" it from screwing up the layout – vsync May 26 '14 at 12:50
  • 1
    Please be careful when using this solution, especially on memory-constrained environments like mobile devices. On a Cordova iOS app, I saw adding ```transform: translateZ(0);``` to a few dozen elements in a list added an extra 70 MB of memory usage, which led to out-of-memory crashes. Unfortunately I don't have a great workaround for this. I ended up adding the transform CSS when switching views and then disabling it on a timer. It's very hacky, but so far it works. – mathew Jul 09 '14 at 19:56
7

Like Mark Napthine said, adding the following css definition:

-webkit-transform: translateZ(0);

should indeed force rendering. The trick is to put it on every unrendered element inside your overflowing container. In my case it's an unordered list of images contained in a div with the def

-webkit-overflow-scrolling: touch;

I put the "transform" definition above on the li tags wrapping the images and it solved the problem instantly. Hope this helps...

Armel Larcier
  • 15,747
  • 7
  • 68
  • 89
7

We tracked this down to elements that had position:relative or position:absolute. After we removed them the items would display while scrolling.

EionRobb
  • 532
  • 5
  • 13
2

This is a bug that I've run across too - this question seems to relate to the same issue: CSS3 property webkit-overflow-scrolling:touch ERROR

There user1012566 suggested it has to do with the position property of the elements inside the scroll (static works, nothing else does), though I had mixed results with this.

Another user said they've reported it on the bugreport.apple.com site, but reported bugs aren't public there, so it's impossible for the rest of us to see the official response, if any, or track progress.

Community
  • 1
  • 1
Ashish
  • 48
  • 6
  • bugreport.apple.com would explain why I can't find any reference to the bug online. I'm going to register it through the webkit bugzilla reports as well. – justinavery Nov 17 '11 at 08:39
  • Post a link here when you do? It'll help anybody who has the same problem and finds this question. – Ashish Nov 22 '11 at 18:02
2

This bug seems even worse with iFrames. I created a JSFIDDLE to demonstrate it (open http://jsfiddle.net/KMayN/9/ with an iOS 5.0.1 device) and I sent a bug report to Apple. Very curious: if you scroll, you'll see a blank (not rendered) content...but if you then zoom, the content appears! And so on... I will keep you up-to-date if they reply to me. I tried everything (scrollable iFrame with/without div container, container with/without scrolling, etc...), there are simply no way: we have to wait Apple for a bugfix.

lucaferrario
  • 990
  • 9
  • 9
  • Apple has asked me for more informations (screenshots and debug console dump). I submitted all these to them, and I will update you as soon as they tell me something else. So the issue remains in status "Open" for the moment. – lucaferrario Dec 09 '11 at 13:27
  • Apple has told me that they have figured out that the bug is already known and it's being worked on by the engeneering team... Let's hope for a fix in the next iOS release! – lucaferrario Dec 16 '11 at 00:29
  • I'm really disappointed... Apple didn't fix this in iOS 5.1 :-( And they didn't gave me any update :-( Maybe they do not want webapps to work too good on the iPad, otherwise their incomes from native apps (Apple store) would decrease? – lucaferrario Apr 03 '12 at 13:15
  • this is bad. :( so would the the best workaround for now, would be to use something like Scrollability ? – ghostCoder Apr 03 '12 at 13:31
  • 1
    For the moment, I just fell back to "webkit-overflow-scrolling: scroll;" (without momentum, but at least it's usable), hoping that a bugfix will be released by Apple some day... – lucaferrario Apr 04 '12 at 14:31
  • I had the very same problem, that an `iframe` gets cropped. I came up with a solution that changes a `css`-property every time at the end of scroll to force safari to re-render the `iframe`. It's not nice, but it works … See this link for example code: http://stackoverflow.com/a/11361719/1456376 – insertusernamehere Jul 06 '12 at 11:58
  • same on android… is it only apple ? – Ben Feb 07 '13 at 14:57
  • @Ben: Which version of Android? Android < 3 does not fully support iframes, so expect a lot of troubles in trying to use iframes with Android 2.x. If you want to support Android < 3, you should find an alternative to iframes... ;-) – lucaferrario Feb 08 '13 at 15:43
  • No iframe; well… phonegap. Android 4+. When you scroll too fast (it's pretty ok when slow), it clips a hell of a lot – Ben Feb 08 '13 at 16:49
0
-webkit-transform: translate3d(0, 0, 0);
tarikakyol
  • 513
  • 7
  • 13