StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Some suggestion:</p> <ol> <li>Provide the tablet model and android version may help </li> <li>Information like image dimension and size, animation duration, or a <strong>demo page</strong> on <a href="http://jsfiddle.net" rel="nofollow">jsfiddle</a>/<a href="http://jsbin.com" rel="nofollow">jsbin</a> will help a lot</li> </ol> <p>Back to the question:</p> <ol> <li>in the performance term, using <code>translate3d</code> will get better performance, since it doesn't work, the main bottleneck is elsewhere.</li> <li><p>from my experience with mobile webkit, when there is large image (in term of size or dimension), you may have trouble:</p> <ul> <li>Ram problem</li> <li>High Network Delay</li> <li>Long enough loading and rendering time</li> </ul></li> </ol> <p>If your UI-triggered redraw will smooth everything, the lag may be caused by <strong>image loading & rendering</strong></p> <p>Solution:</p> <ol> <li>Set a reasonable delay on your animation by <code>animation-delay</code> or <code>setTimeout</code></li> <li>More precise: preload the image, and then trigger the animation when it is done by listening its onload event: <a href="http://api.jquery.com/load-event/" rel="nofollow">jQuery .load explanation on image load event behaviour</a></li> <li>If the above not work for you, try it: <a href="http://mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/" rel="nofollow">Force-redraw DOM technique for WebKit-based browsers</a></li> </ol> <p>For 2 & 3, the code will be like this:</p> <pre><code>$("&lt;img&gt;") .attr({ src: " /* image url */ " }) .load(function(){ /* i. use class or animationName to set animation */ /* ii. force redraw go there if needed */ /* wrap i & ii into a setTimeout function inside this callback if more delay is needed */ }) </code></pre> <p>good luck.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload