Using -webkit-overflow-scrolling: touch sometime scrolls in the wrong direction

17,474 views
Skip to first unread message

David Lewis

unread,
Mar 4, 2012, 4:48:42 PM3/4/12
to phonegap
Hi there,

I'm experiencing a strange problem when I use -webkit-overflow-
scrolling: touch within my app.

Within my app I use this to allow people to scroll up and down through
the contents of a story (like The Onion), this works perfectly 90% of
the time, but sometimes the scrolling will want to go left and right
(even though you're gesturing to go up and down).

If you've experienced this you'll know exactly what I mean.

At the moment I'm trying to produce a stand alone demo of this
problem, but without knowing the root cause it's a little hard.

Has anyone else experienced this?

This post on stack overflow seems to be something similar:

http://stackoverflow.com/questions/7992952/issue-with-scrolling-in-ios-5-using-webkit-overflow-scrolling

And I'd really like to contact that user to get their code as an
example, but there's no way to contact someone directly... and my post
on that question was deleted as it was seen as being another question :
(

Help me prove my sanity :)
David

David Lewis

unread,
Mar 4, 2012, 11:10:55 PM3/4/12
to phonegap
As a follow up to this I've managed to put together the following
demo:

http://bit.ly/wTrPFs

The problem is most apparent in iPad 1, but iPad 2 seems to have
problems with the scrolling too (looks like it freezes).

Kerri Shotts

unread,
Mar 4, 2012, 11:16:44 PM3/4/12
to phon...@googlegroups.com
phoneGap does use an IFRAME to do communication between the native and js layer, so that may be contributing to the issue. (Going by the reply on the SO question above.)

I've had a similar issue: that is, that when attempting to use native scrolling, one half of the screen would scroll correctly (say, the left side), and the right side would scroll in the reverse direction (that is, if the intended direction was to swipe DOWN to scroll UP, the iPad would instead scroll DOWN. Very disconcerting feeling). I also noticed that swiping in odd directions also produced aberrant behavior where the scroll would not be in the appropriate direction.

This was the latest thing that skewered my attempt to go to native scrolling in my app, so I had to go back to iScroll. So far, save for (perhaps) apps with simple layout, it seems native scrolling is a bust when it comes to using html+js+css behave like an app. Which is too bad.... :-( 

David Lewis

unread,
Mar 4, 2012, 11:39:23 PM3/4/12
to phonegap
Thanks for the reply Kerri.

Your scrolling problems sounds just as mad as mine!! :)

TimW

unread,
Mar 8, 2012, 6:44:39 PM3/8/12
to phon...@googlegroups.com
For what it's worth, you can avoid using the internal PhoneGap iframe.  I made the following change to phone gap-1.4.1.js (the version I happen to be using):

    if (PhoneGap.commandQueue.length == 1 && !PhoneGap.commandQueueFlushing) {
        /*if (!PhoneGap.gapBridge) {
            PhoneGap.gapBridge = PhoneGap.createGapBridge();
        }

        PhoneGap.gapBridge.src = "gap://ready";*/
        location = "gap://ready";
    }

Essentially rather than create the bridge iframe (which is just used for signaling native code) I change the actual location of the current window.  However, native code disallows this change, so the location never really changes.  The signal still get's through though.

Works for me as they say, and I now get to use the touch scrolling again.

Shazron

unread,
Mar 8, 2012, 7:29:10 PM3/8/12
to phon...@googlegroups.com
Not using the iframe for the bridge may cause side-effects however
since the primary reason we went that route is for reliable use of
setting html code through the innerHTML property of a DOM element.

http://blog.johnmckerrell.com/2007/03/07/problems-with-safari-and-innerhtml/

> --
> You received this message because you are subscribed to the Google
> Groups "phonegap" group.
> To post to this group, send email to phon...@googlegroups.com
> To unsubscribe from this group, send email to
> phonegap+u...@googlegroups.com
> For more options, visit this group at
> http://groups.google.com/group/phonegap?hl=en?hl=en
>
> For more info on PhoneGap or to download the code go to www.phonegap.com

TimW

unread,
Mar 10, 2012, 2:22:08 PM3/10/12
to phon...@googlegroups.com
It wasn't my first choice as a workaround.  Initially tried using an image to trigger the gap: protocol, but that didn't work.  Didn't try XMLHttpRequest.

Be nice if Apple just fixed it of course, since I wanted to do YouTube embeds but obviously can't since they use iframes too.

Eric Blade

unread,
Mar 11, 2012, 3:03:24 PM3/11/12
to phonegap
I'm guessing that there are some significantly wrong things going on
with calculations in the webkit somewhere -- I've tried at least a
half-dozen different javascript scrolling methods, and on both iOS and
Android they will all exhibit the same "goes the wrong direction for
no obvious reason" thing sometimes.

On Mar 10, 2:22 pm, TimW <tim.j.wilkin...@gmail.com> wrote:
> It wasn't my first choice as a workaround.  Initially tried using an image
> to trigger the gap: protocol, but that didn't work.  Didn't try
> XMLHttpRequest.
>
> Be nice if Apple just fixed it of course, since I wanted to do YouTube
> embeds but obviously can't since they use iframes too.
>
>
>
>
>
>
>
> On Thursday, March 8, 2012 4:29:10 PM UTC-8, Shazron Abdullah wrote:
>
> > Not using the iframe for the bridge may cause side-effects however
> > since the primary reason we went that route is for reliable use of
> > setting html code through the innerHTML property of a DOM element.
>
> >http://blog.johnmckerrell.com/2007/03/07/problems-with-safari-and-inn...
> > > phonegap+u...@googlegroups.com

Thai Rath

unread,
Apr 24, 2012, 1:31:38 PM4/24/12
to phonegap
I am seeing this issue very frequently; even on Mobile Safari. Has
there been any updates on this issue? Is Apple going to fix this bug?

joafeldmann

unread,
May 22, 2012, 5:05:43 AM5/22/12
to phon...@googlegroups.com
Thanks, this stops scrolling issues and related issuses (see: https://groups.google.com/forum/?fromgroups#!topic/phonegap/eYcoMaWx3bA)  for me in Cordova 1.7.0 as well. 

@Shazron: What side-effects may occur?

dp_Lewis

unread,
Jun 4, 2012, 3:04:34 AM6/4/12
to phon...@googlegroups.com
This solution worked for me too :)

Had the problem reoccur in a new project.

No side effects yet, but I'll keep my eye out.

Thanks a million!

Greg

unread,
Jul 28, 2012, 1:30:41 PM7/28/12
to phon...@googlegroups.com
I have done some additional testing. It looks like google analytics plugin has nothing to do with this problem. Command queue just stops flushing at some point. The only thing that I've noticed that the chance it stops working is higher when I have very frequent calls to the native code. I output lots of debug info to the console and whenI minimized the number of calls to the console.log, the problem seems to disappear.

Perhaps, some of the cordova developers could explain the "if" statement on line #967 of cordova.ios.js:
Why (cordova.commandQueue == 1) and not (cordova.commandQueue >= 1)?
Is there a chance of executing the same command multiple times?

Thanks,
- Greg

On Thursday, July 26, 2012 11:57:37 PM UTC-7, Greg wrote:
I believe I came across side effects. I have noticed that at some point cordova stops flushing command queue.
I used iWebInspector to check the cordova object. The cordova.commandQueueFlushing property was equal to false. However, cordova.commandQueue array was not empty. It's length was greater than 1. Obviously, the condition around line #969 in cordova.js was never evaluated to true. It started working again once I set cordova.commandQueue to an empty array.

I use cordova 2.0. But I've noticed this problem in 1.7. I was never able to reproduce this problem with iframe. Without iframe it happens at some point. I can't figure out the exact conditions. It seems like there is a thread race condition between native side and javascript. The problem started occurring when hooked up google analytics plugin. And only when I track "tap" event (I use zepto.js).

- Greg

Kerri Shotts

unread,
Aug 15, 2012, 11:06:12 PM8/15/12
to phon...@googlegroups.com, phon...@googlegroups.com
Surprised that does the trick! I wouldn't have thought of attaching the attribute to the gap bridge. Nice Find.

______________________________
Kerri Shotts
photoKandy Studios LLC

📱 Phone: +1 (312) 380-1035
🌐 Web: http://photokandy.com 

Twitter: @photokandy


On Aug 15, 2012, at 15:54, raulc <raulci...@gmail.com> wrote:

hi,

i also was experiencing some strange effects with -webkit-overflow-scrolling.
mostly was working, but when switching from a div to another, each 4-5 times the scroll in the 2nd div just froze.

the solution to not use the bridge was working, but i did not want to go that way, since the side effects were not clear.

so what seem to have fixed it for me was, in cordova.js (i am using 2.0.0), in the function createGapBridge, i set the following property on the newly created ifram:

       gapBridge.setAttribute("-webkit-transform","translate3d(0px, 0px, 0px)");

hope that helps,
Raul.
--
-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en

For more info on PhoneGap or to download the code go to www.phonegap.com

To compile in the cloud, check out build.phonegap.com


Kerri Shotts

unread,
Aug 15, 2012, 11:08:54 PM8/15/12
to phon...@googlegroups.com, phon...@googlegroups.com
Okay, hold on a second... you're actually setting an attribute, not adjusting the style on that iframe, so I'm surprised this does anything at all.

I wonder if just setting any attribute on the iframe works? What if you set an attribute of an obviously non-existent attribute, eg:

gapBridge.setAttribute("blahblah","blah");

Does that continue to fix the problem, or does the problem return?


______________________________
Kerri Shotts
photoKandy Studios LLC

📱 Phone: +1 (312) 380-1035
🌐 Web: http://photokandy.com 

Twitter: @photokandy


On Aug 15, 2012, at 15:54, raulc <raulci...@gmail.com> wrote:

hi,

i also was experiencing some strange effects with -webkit-overflow-scrolling.
mostly was working, but when switching from a div to another, each 4-5 times the scroll in the 2nd div just froze.

the solution to not use the bridge was working, but i did not want to go that way, since the side effects were not clear.

so what seem to have fixed it for me was, in cordova.js (i am using 2.0.0), in the function createGapBridge, i set the following property on the newly created ifram:

       gapBridge.setAttribute("-webkit-transform","translate3d(0px, 0px, 0px)");

hope that helps,
Raul.

Am Sonntag, 4. März 2012 22:48:42 UTC+1 schrieb dp_Lewis:

Greg

unread,
Aug 16, 2012, 12:06:25 AM8/16/12
to phon...@googlegroups.com
I've using the following workaround:
    var gapInterval = null;
    createGapBridge = function() {

        gapBridge = document.createElement("iframe");
        gapBridge.setAttribute("style", "display:none;");
        gapBridge.setAttribute("height","0px");
        gapBridge.setAttribute("width","0px");
        gapBridge.setAttribute("frameborder","0");
        document.documentElement.appendChild(gapBridge);

        if (gapInterval === null) {
            gapInterval = window.setInterval(function() {
                if (cordova.commandQueue.length === 0 && cordova.commandQueueFlushing === false) {
                    if (gapBridge) {
                        gapBridge.parentNode.removeChild(gapBridge);
                        gapBridge = null;
                    }
                    clearInterval(gapInterval);
                    gapInterval = null;
                }
            }, 500);
        }
    }

It was suggested by one of the cordova devs.

FYI:
Not using iframe at all is dangerous as webkit may skip navigation to "gap:ready" url in case such requests come very fast one after another. That's why cordova uses iframe.

raulc

unread,
Aug 16, 2012, 7:54:05 AM8/16/12
to phon...@googlegroups.com
sorry that did not work.
you are right.

it just did not create the iframe, so all the problems with the scrolling where gone
however phonegap did not work anyme :)

sorry for posting too soon.

raulc

unread,
Aug 16, 2012, 2:11:39 PM8/16/12
to phon...@googlegroups.com
i have managed to get it working, however using a solution that is not related to phonegap.

my problem was that i had different divs, only one shown at the time.
the divs have scrollable content - which just froze regularly..

the solution that worked for me was to not hide the hidden divs (display: none;) but rather take them offscreen (-webkit-transform: translate3d(350px, 0px, 0px);)

Kerri Shotts

unread,
Nov 7, 2012, 5:21:17 PM11/7/12
to phon...@googlegroups.com
Yeah, don't add an iframe into the DOM -- that's what causes the issue. /Any/ iframe can cause the behavior.

I don't know if Apple has ever fixed it -- I just avoid iframes whenever possible anyway, and since the newest version of PG no longer uses the iframe as the bridge by default, it's safe to use native scrolling on iOS as long as you don't add any other iframes into the mix. 

Not to say that there aren't other funky glitches with native scrolling, but c'est la vie, I guess.

______________________________
Kerri Shotts
photoKandy Studios LLC

📱 Phone: +1 (312) 380-1035
🌐 Web: http://photokandy.com 

Twitter: @photokandy


On Nov 7, 2012, at 10:10, Giovanni <giovanni...@paperlit.com> wrote:

Hi all,
this does not work for me on iPad iOS 5.1.1.
Removing the gap bridge when the queue is empty does nothing.
The reverse scrolling appears as soon as I append an iframe into the dom.
Reply all
Reply to author
Forward
0 new messages