Problems with scrolling on Android default browser

[joshas]

"position: fixed" on body and .content prevents scrolling on older Android devices (android 2.3) with default browser. Issue can be reproduced in Chromium browser using "Emulate" feature in Inspection Tools. After removing position: fixed scroll works correctly.

[XhmikosR]

IIRC this was fixed in master and should be in 2.0.2. Can you try with the latest master?

/CC @connors

[joshas]

No, on master .content position was changed to "absolute", but body remains "fixed". Setting both (body and .content) to "static" fixes the problem at least on Android. Not sure about what this fix might break.

[joshas]

After a bit more research my first "fix" doesn't really fix the problem. To get scrolling working inside overflow:auto block on Android 2.3 I used code from this article: http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/ . Had to remove touch detection, as it failed. Also, scrolling is jerky now. Android 4.0.3 and 4.4.2 doesn't need this fix. While Android 2.3 usage is shrinking, it is still at 19.0% usage, so it would be nice, if Ratchet had support for at least this version of Android.

[TheCodeDestroyer]

I am also having this issue. I guess this could be solved with another ratchet template for older android versions.

[elmariachi111]

I think some part of Ratchet2 is decreasing the scroll speed of longer lists on Android stock browsers (up to at least 4.3). I made a video of the difference:

https://www.youtube.com/watch?v=LZPrb4-FOwI (first: without Ratchet, then with Ratchet, then without again, it's a Galaxy Nexus with Android 4.3).

I disabled all (fixed) headers for that demo. Besides ratchet I'm using masonry, jquery, backbone/underscore. The effect is subtle but adds up on longer scrolling lists until it renders the application unusable (in the real application I have several infinitely scrolling lists each with an individual masonry on top of each other). I think I have reproduced that issue on a 4.4, too. In general I want to use ratchet for a Cordova application.

This is the code (not really clean) for the version with ratchet:

    <div class="content">
        <ul class="table-view">
            <li class="table-view-cell">Angebote von Real</li>
            <li class="offerlist content-padded" id="real-offers">
            <div class="grid-sizer"> </div>
            </li>
        </ul>
    </div> 

and the code without ratchet:

    <div class="content">
        <ul class="offerlist" id="real-offers">
            <div class="grid-sizer"> </div>
        </ul>
    </div>

I tried to enable / disable GPU rendering in both cases but didn't find any difference in the behavior.

PS: there's absolutely no difference when using mobile Chrome.

[voronianski]

+1 @joshas @XhmikosR so how did you manage to fix the problem and use ratchet for old Android version?

/cc @connors

[XhmikosR]

@voronianski: I didn't fix it myself; it was supposed to have been fixed in master.

[mouse-lin]

I also encountered this problem. So I have to change body position with static to fix the problem. I dont not why set body position fixed default?