Overflow:scroll elements on android and native scrolling, -webkit-overflow-scrolling: touch

Question

..with this project I am going to burn my brains at some point. After 10 hours still nothing on this.

There isn't any smoothness in the Android stock browser (currently testing on s3 mini, android 4.1.2) in overflown elements.

So, I read this article here: Chrome Browser for Android no longer supports -webkit-overflow-scrolling? Is there an alternative?

...the article says that you strictly have to use z-index:0 in overflown elements to enable 'fast scrolling' aka native accelerated scrolling on android devices.

Following the above, and by adding translateZ:(0) and -webkit-translateZ:(0) (this has took me several hours to realize!) I have managed to get native scrolling for Chrome, but for the life of me can't get it to work in the stock Android browser.

Android stock browser has caused me a million of issues so far, and it just can't stop. Any help is appreciated! Off I go to sleep, hopefully I get some... :/

Answer 1

我会看看https://famo.us/或 iScroll.js

Answer 2

...As a sidenote to people interested in this, since this became a popular question.

There is a combination of two things android can't handle:

Relatively positioned elements in an overflown element on a fixed position element.

I came to this conclusion after a lot of trial and error. iScroll is quite nice but is also quite 'heavy' js - using the above combination could lead to the same performance issues.

So, if you can avoid using the above structure, then the latest android versions 4+ can handle overflown elements quite well and fairly smooth as long as the -webkit-overflown-scrolling:touch is used.

Hope this helps.