Force Android browser to redraw every second

StackOverflow https://stackoverflow.com/questions/8351273

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?

Was it helpful?

Solution

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.

OTHER TIPS

This little snippet of code and blog post from Paul Irish might be helpful to you:

http://paulirish.com/2011/requestanimationframe-for-smart-animating/

And it's nearly cross browser if that floats your boat.

Forgive me if I'm not reading your question right.

Are you planning on using the tablet's gyro to pan about a large image? That should be possible in code.

However, forcing a transition to update faster is out of the developer's control, to my knowledge. The best you can do is make sure that that is all the tablet has to worry about.

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                padding:0px;
                overflow:hidden;
            }
            #img {
                position:absolute;
                left:0px;
                top:20px;
                -webkit-transition:left 0.5s;
            }
            </style>
    </head>
    <body>
        <img id="img" src="img.png" />
    </body>
    <script>
        function onOrientationChange(e) {
            var img = document.getElementById("img"); 
            var maxWidth = img.clientWidth - document.body.clientWidth;

            img.style.left = ((e.gamma-90) * maxWidth / 180 ) + "px";
        }
        window.addEventListener('deviceorientation', function(e){onOrientationChange(e)}, true);
        </script>
</html>

Have you tried using translate 3d? GPU kicks in when it's used.

HTML5 App/Animation Performance

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top