Scrolling issue with plain HTML and overflow:auto in native Android browser -
a simple html page contains div overflow-y:auto within of div overflow-y:auto. page scrolls on touch devices ios safari , android chrome browsers.
however, if open same page in native android v.4.0 4.3 browser , scroll outer div, inner div not move synchronously remaining content , jumps place after delay.
the same happens if internal div has overflow-x: auto.
example page: http://jsbin.com/cojoluwo/1/
the code looks follows:
<!doctype html> <html><head> <meta http-equiv='x-ua-compatible' content='ie=edge' /> <meta http-equiv='content-type' content='text/html;charset=utf-8'/> <title>test</title> <style> html, body { height: 100%; margin: 0; padding: 0; } #content { height: 100%; overflow-y: auto; } #scroller{ height: 100px; overflow-y: auto; width: 200px; border: 1px solid red; } </style> </head> <body class='sapuibody'> <div id='content'> <div> <p> text ...... <p> text <div id=scroller> <p>internal text ........... <p>internal text </div> <p> text ........... <p> text </div> </div> </body> </html> is bug? if yes, there workaround known?
there's no need this:
#content { height: 100%; overflow-y: auto; } a scrollable div set overflow within scrollable div set overflow not thought on mobile , since css properties #content redundant , not useful, can safely remove them , work
http://jsbin.com/cojoluwo/5
android html css scroll
No comments:
Post a Comment