Scrolling breaks when you scroll on header

[timwis]

Forgive me if this is a known issue - I tried searching but couldn't find it.

I really look forward to using ratchet as an alternative to jQuery Mobile, but I seem to be having a major issue scrolling on my iPhone 5. The initial scrolling works fine, but if I drag the header, as if to scroll it down, that essentially breaks scrolling in the app until I refresh it. It starts scrolling the whole app instead of just the content area.

I've tried this on (1) my own basic ratchet page, (2) ratchet's dist/template.html page, and (3) junior's example, and all seem to have this issue. Am I doing something wrong or is this a known issue?

Thanks

[mgcrea]

I do have an iPhone5 and I did not encounter this kind of behavior for now.

I know that there have been numerous issues with the -webkit-overflow-scrolling: touch; that is currently used by ratchet.

What is your exact iOS version? Do you encounter this in the regular Safari Mobile, with a full screen shortcut or inside a native container (like cordova)?

[timwis]

@mgcrea Thanks for the prompt response. I'm on iOS 6.0.2 in regular Safari Mobile, though I experienced the same with an "add to homescreen" shortcut.

Steps to reproduce:

1. Go to http://dev.timwis.com/ratchettest in Safari Mobile
2. Drag header bar down. You should see the whole window scroll, including the Safari address bar
3. Try dragging from the bottom of the page up. You should see the window crop the document as if you've hit the bottom of the document.

[mgcrea]

@timwis I can confirm the bug, however I am not sure if ratchet can do anything about it.

You could check/try https://github.com/joelambert/ScrollFix and/or http://scrollability.com/

-webkit-overflow-scrolling: touch; does not seem ready for prime time...

Damn, it's about time this scrolling issue gets fixed for mobile html apps.

[timwis]

Thanks. I just tried both of those scroll fixers, doing the same process, and got the same bug. Oddly enough, jQuery Mobile works fine, even with the fixed header.

[mgcrea]

From http://stackoverflow.com/questions/7798201/document-ontouchmove-and-scrolling-on-ios-5

 elementYouWantToScroll.ontouchmove = function(e) {
    e.stopPropagation();
 };

might be worth a try.

[timwis]

Hm, didn't seem to have an effect. It seems like the only library that doesn't give me this bug is iScroll. Does this mean that every app built using ratchet that has a fixed-position header will have this bug?

[timwis]

Interesting, if I revert it to a plain old fixed position header by disabling -webkit-overflow-scrolling it works fine. This CSS works great:

body, .content { position: static; } .content { -webkit-overflow-scrolling: auto; padding-top: 44px; }

The only thing is the Safari address bar hangs for a couple seconds, and the header is invisible until it disappears.

[timwis]

In case anyone else gets here via searching, here's the CSS fix I use to revert to normal scrolling with a fixed header:
https://gist.github.com/4487023

[aetherwu]

@timwis 's solution works great.