Bug Report - Android / Cyanogenmod 7.0.3 (Desire) and Desire HD about nanoscrollerjs

[kristerkari]

From what I've read and tested, I do think that it's a bug in Android browser. Since I haven't really tested with many Android versions (only 2.3.3), I'm not completely sure about it.

Quote:
"This issue seems to be that WebKit on Android takes CSS "overflow: auto" and "overflow:
scroll" as "overflow: hidden", this is going to break a fair number of sites that use
this to allow scrolling boxes within the page."

However it should be fixed in Android version 3. I can't verify it since I don't have a device to test with.

nanoScroller also does not work on iOS versions less than 5.

Any workarounds to fix support for older mobile browsers would be appreciated.

More info:
http://code.google.com/p/android/issues/detail?id=2118
http://fioravengi.blogspot.com/2011/06/why-custom-scrolling-is-still-required.html

[emmgfx]

In honeycomb the scroll works well, but the .pane .slider don't move, looks like a positioning issue.

Tested on 3.2.

Great job, seriously, ;)

[kristerkari]

I made iOS5 related fixes in 5d471b9. Anyone able to test if it also fixed the scrollbar for Android 3+ ?

[emmgfx]

Continues the same problem as before, : (

[kristerkari]

@emmgfx thanks for testing it. Support for android is difficult to fix, because I don't have a device for Android testing.

[emmgfx]

I will do the necessary tests, and if I have time I will try to fix it, although I have little idea. The problem is that the scroll bar (.nano > .pane > .slider) does not move with the content.

[i-like-robots]

The issue can be polyfilled quite neatly with Overthrow.js from the Filament Group, it plays fair with nanoScroller.

This is my current testing rig (working on Android 2.3.3 and iOS 4)

if (overthrow && overthrow.support !== 'none' && $.fn.nanoScroller)
{
    $('.overthrow').nanoScroller({ contentClass: 'overthrow-content' });
}

[kristerkari]

Nice :) @i-like-robots would you like to update nanoScroller README with more info about polyfilling for Android/iOS4? Would be great for better mobile support.

[i-like-robots]

Sure, no problem

[kristerkari]

I tested out your polyfill trick, and it really seems to fix the lacking mobile support. Thanks @i-like-robots, you're the man!

[kristerkari]

@ibalpinar, @emmgfx or @i-like-robots. Can anyone of you help me and do a quick test on Android to see if using the overthrow.js polyfill fixes nanoScroller for Android 2 or 3? Would be nice to know what the Android situation really is.

[i-like-robots]

It works for Android 2.2 and 2.3 in native browser and Opera 11.6. Firefox for Android supports overflow:scroll natively. I'll do more testing this week to confirm.

[ibalpinar]

Hey guys, sorry for the late reply. I tested out all possible mobile devices and it all works fine. Thanks for your supports and replies.