"Fix" Android 2.x does not support overflow, position:fixed solutions

The Overflow:auto attribute (position:fixed is not supported) is not supported on Android 2.x and IOS5.
Mobile end browser compatibility and PC-side compared to more than. The operating system version and all kinds of browsers and a variety of screen size combinations, you can never predict what your application will be on the phone on what kind of problem.
Tested a variety of browsers (Chrome Mobile browser, Baidu Mobile browser, mobile phone QQ Browser, UC browser, UC Browser HD, Safari browser, Firfox Mobile browser, winphone system browser, the terminal includes mobile phones, ipads and PCs Android Simulator, PC iOS simulator)

Some of the more obvious problems are:
1, some mobile phone to position:fixed support is not perfect (follow the gesture after scrolling back to the fixed position, doubt whether the phone or browser performance problems, rendering speed can not keep up with this "card" effect)
2, some mobile phone or browser Overflow:auto support is not perfect, in the millet with the browser, the fixed height of the container set Overflow:auto after the container content exceeded the height of the container, directly hidden, no matter how drag can not be displayed. In particular, the overflow situation in the IFRAME is more complicated.
3, Winphone more horror, display effect and IE7 almost, do not support CSS3 gradient, linear background directly show gray-white.
Thus, to be compatible with each system version, the browser, the size of the screen is really not easy.
4, basic support Min-height properties

For some mobile phones do not support overflow:auto situation, the best solution is: not to use the Overflow:auto property, that is, do not set a fixed height. The follow-up will talk about other solutions.


In other words, when you do the app click Title Jump function of this problem, the expected function is this: Click on the Title List button, pop-up screen title list (position:fixed;top:20px/* Empty out of the app Header*/;bottom:0px;o Verflow;auto, when a lot of questions, you can slide the display title number click Jump. When the test of millet from the browser can not slide, Samsung's browser may be sliding parts, but the display is not complete.

Debugging Scenario One
So I thought, since the Android and iOS versions support the overflow attribute, write a compatible approach:

1	box{position:absolute;top:20px/* Empty the app's header*/;min-height:500px/*box need to cover the entire page */;}

2	The-webkit-transform-3d is not recognized under @media all and (-webkit-transform-3d) {/* Android4.0, and it can be used to do Android4.0 version compatibility */

3	. box{position:fixed;top:20px;bottom:0px;overflow;auto;min-height:0px;}

4

}

[Note: Hack source and analysis please refer to: "Original" WebApp development compatible Android4.0 The following version of CSS hack]
But the test results are not satisfactory, in the android4.x QQ browser, did not recognize the hack, Baidu Browser successfully identified, but the slide after the title or display is not complete, Chrome browser relatively good support.

Debug Scheme two (1)
After the search, Germany asked the question, according to the reference answer test

The Android 2.3 system WebView does not support the page Div scroll bar, do you have a solution?

android2.3 does not support scroll bars, and scrolltop is not supported. (Setup overflow is not hidden to support).
I'll give you a way. OK, hope to adopt:

01