Issue with scrolling in iOS 5 using -webkit-overflow-scrolling

Question

I have an HTML page with a fixed-height div which should be scrollable (only vertically). In iOS 5 this can be achieved using:

overflow-y: auto;
-webkit-overflow-scrolling: touch;

The div contains an unordered list with about 10 items.

The scrolling works, but sometimes it scrolls only if I swipe my finger diagonally or even horizontally and not vertically as it should be.

I'm wondering if anyone has encountered this issue. I don't want to think that it is a bug in iOS5, but I can't figure out what I'm doing wrong because most of the time it works fine.

Did you find a fix or a workaround? I ran into the same problem and can't get my head around it... — JohannesD, May 09 '12 at 12:01
I started a bounty so I can give it to [paul](http://stackoverflow.com/a/8707635/458193). — Dan Abramov, Sep 09 '12 at 19:45
[Relevant discussion in Google Groups](https://groups.google.com/forum/?fromgroups=#!topic/phonegap/n2k-OvqCDcE) — Dan Abramov, Sep 09 '12 at 19:50

score 10 · Answer 1 · answered Jan 03 '12 at 03:36

10

I had exactly the same issue. The problem turned out to be caused by two zero size iframes my site used to track history changes and load scripts. Removing these fixed the issue. I filed a bug with apple, waiting to hear back from them.

Check to see if you have any iframes on your page they could be the cause.

answered Jan 03 '12 at 03:36

paul stockley

501
3
4

Have you heard anything from Apple? Or have you found another workaround than removing the iframes? I ran into this issue when trying to get -webkit-overflow-scrolling to work with [tag:vaadin]. – JohannesD May 09 '12 at 10:36
Bump on this, seeing a similar issue: http://stackoverflow.com/questions/10718296/ios5-overflow-scrolling-horizontally-is-controlled-by-vertical-touch Flipping between portrait and landscape seems to fix the problem. No idea the cause though (no iframes on my page). – middric May 29 '12 at 13:55
Flipping, 3d-transform and iframe removal don't do anything for me. Starting a bounty – Hessius Jul 17 '12 at 09:25
After I spent a couple of evenings on this bug, removing the invisible `iframe` resolved the issue. You, sir, are awesome. – Dan Abramov Sep 09 '12 at 19:44

score 4 · Answer 2 · edited May 23 '17 at 12:26

I have found a hacky solution but it needs javascript...

I stumbled upon that problem while loading scrollable nodes via ajax and appending them with js.

I found out that resetting the -webkit-overflow-scrolling property with js saved the day

JS CODE:

var myDiv = $('.myDiv');
myDiv.css('-webkit-overflow-scrolling','auto');
function fn(){
    myDiv.css('-webkit-overflow-scrolling','touch');
}
setTimeout(fn,500);

It really sucks that we have to call the setTimeout method but that's the only way I could think of...

EDIT : Watch out for display:none

Webkit overflow scrolling touch CSS bug on iPad

THANK YOU! It is hacky, but as far as I'm concerned, this is an iOS bug in the first place. — Adam Grant, Apr 24 '13 at 18:44

score 2 · Answer 3 · answered Jun 29 '12 at 06:22

You need to put this css setting in your css file - the one you load using the content_css configuration variable:

body {
    -webkit-transform: translate3d(0, 0, 0);
}

The other option is to set the css directly from code on tinymce initialization:

$(tinymce.activeEditor.getBody()).css('-webkit-transform', translate3d(0, 0, 0));

score 2 · Answer 4 · edited May 23 '17 at 10:28

2

I had the same problem in iOS 5.1.1 and it turned out to be due to an ::after pseudo-element with position: fixed that was on an element that contained the scrollable list exhibiting the "wrong scroll axis" behavior. Details here.

edited May 23 '17 at 10:28

Community

1
1

answered Nov 15 '12 at 03:35

lazd

4,468
3
23
17

Issue with scrolling in iOS 5 using -webkit-overflow-scrolling

4 Answers4

Linked

Related