i'm experiencing strange problem on stock browser on htc 1 x running android 4.2.2.
i have container div overflow-x set hidden , overflow-y set auto, has fixed width , height dimensions. child content has width , height exceeds parent. idea should able scroll vertically not horizontally. every browser i've seen behaves correctly , desired effect. however, on android stock browser able scroll horizontally , vertically freely, not want overflow-x: hidden supposed prevent horizontal scrolling.
i've created codepen demo basic problem: http://codepen.io/anon/pen/yxjzkr
code here too:
<!doctype html> <html> <head> <title></title> <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1' /> <style> .container{ width: 300px; height: 500px; overflow-x: hidden; overflow-y: auto; } ul.pages { position: relative; margin: 0; padding: 0; white-space: nowrap; } li { width: 300px; line-height: 500px; display: inline-block; margin: 0; padding: 0; vertical-align: top; text-align: left; white-space: normal; height: auto; } li.one { background-color: red; } li.two { background-color: yellow; } li.three { background-color: green; } </style> </head> <body> <div class="container" id="container"> <ul class="pages"> <li class="one">hello<br /><br /></li> <li class="two">good</li> <li class="three">bye</li> </ul> </div> </body> i have noticed if shorten height of child content less container, content no longer scrolls horizontally either. unfortunately content taller container.
have spent hours trying work out why happening and, more importantly, looking workaround have had no luck far.
any appreciated.
thanks
i'm assuming <li> elements set display: inline-block in order hide them horizontally. if so, issue .container element not parent of <li>.
the actual parent - ul.pages - defaulting overflow: auto in browser reason. set overflow-x: hidden , should alright.
Comments
Post a Comment