jquery - CSS3 Animate It changes position and width properties for some elements on mobile devices -
i have weird problem of blog post pages, eg. http://www.stgobsas.dk/blog/buenosaires/index.html
the problem seems css3 animate plugin. seems work great when viewing in desktop browser of width (i have tested down 400 px). when view on mobile device (and through chrome's developer tools using device mode) changes position property of <header> , .header-image fixed "not fixed" , makes header/menu bar take more horizontal space, eg. 760 px .main-wrapper takes 375 px should (this iphone 6). don't understand why problem occurs on mobile browsers, , not on desktop browser though window width same.
have @ bottom of script.js file. second last code block blog pages , causes problem. last code block front page , causes similar problem, width of header/menu bar shrinks while animation goes on , ends being fine again.
update: if on through device mode in chrome size of ipad (or bigger 700 px) can see same problem, when scroll way down bottom, last animations waiting user scroll view, problem disappears after animations over. again. must problem css3 animate plugin. why happen?
i hope can figure out going wrong!
after first analysis, seems it's caused :
<img src="buenosairescover.jpg" class="fullsize" height="1200" witdh="1600"> remove width="1600" , height="1200"
and content of div class "details-container".
if remove div , width of image, problem dissapears. that's first interesting track !
Comments
Post a Comment