html - Overflow-x not working on mobile device, even with wrapper class -
so have jquery animation in div-element. clouds moving left right out of screen , repeat. append them , animate this:
$('#clouds').append("<div id='cloud1' class='cloud'><img src='/images/cloud1.png' ></div>"); function movecloud1() { var cloudwidth = $('#cloud1 img').width(); var winwidth = $(window).width(); var rand_y = 60 + (math.random() * 200); $('#cloud1').delay(500).css({left: -400, top: rand_y}); $('#cloud1').animate({ left: winwidth }, (20000+(rand_y*5)), "linear", function() { movecloud1(); }); }
it coming in div's this:
<div class="city_container"> <div id="clouds"></div> <div class='city'></div> <div class='sky'></div> </div>
i noticed ability scroll horizontally appeared once clouds moving outside viewport on right, added overflow-x: hidden;
body
, html
. #clouds
(an element added later, hoping solve this. before appended cloud-elements in city_container
). works in regular browsers such chrome , safari, once try website on iphone keep getting ability scroll horizonally, happens on android phones. when add overflow-x: hidden;
suspect of allowing strange phenomenon. (yes, city_container) don't know else try. don't want allow horizonal scrolling.
for completeness sake, included in head of html:
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
i made sure width set width of window. body
, wrapper-div both have width: 100%;
.
Comments
Post a Comment