Question

I’m moving a very long image using -webkit-transform: translate(-958px, 0); animation

The image gets cut off very soon after it starts to move horizontally, but if I slightly move the tablet screen, it redraws the screen and it displays the whole image while panning across and very smoothly too.

But how do I simulate this in code?

Answer 1

Some suggestion:

1. Provide the tablet model and android version may help
2. Information like image dimension and size, animation duration, or a demo page on jsfiddle/jsbin will help a lot

Back to the question:

1. in the performance term, using translate3d will get better performance, since it doesn’t work, the main bottleneck is elsewhere.

2. from my experience with mobile webkit, when there is large image (in term of size or dimension), you may have trouble:

   • Ram problem
   • High Network Delay
   • Long enough loading and rendering time

If your UI-triggered redraw will smooth everything, the lag may be caused by image loading & rendering

Solution:

1. Set a reasonable delay on your animation by animation-delay or setTimeout
2. More precise: preload the image, and then trigger the animation when it is done by listening its onload event: jQuery .load explanation on image load event behaviour
3. If the above not work for you, try it: Force-redraw DOM technique for WebKit-based browsers

For 2 & 3, the code will be like this:

$("<img>")
.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 */
})

good luck.