Why does moving div leave a trail in javascript on phone?

Question

Works fine on the computer and iPhone but on the Galaxy S3 the block that's moving leaves a trail that gets cleaned up randomly. How do I fix this?

http://curtastic.com/test7.html

The trail disappears (gets cleared like it should) like once per second.

enter image description here

<html>
    <head>
        <meta name="viewport" content="width=device-width" />
    </head>
    <body style='margin:0;width:640px;'>
        <div id=fps></div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
            var block;
            var angle=0;

            var fpsFrames = 0;
            var fpsTime = 0;

            function gameLoop() {
                var now = new Date();
                fpsFrames++;
                if (now - fpsTime >= 1000) {
                    $('#fps').html("FPS: "+fpsFrames);
                    fpsFrames = 0;
                    fpsTime = now;
                }

                block.x += 3;
                if (block.x >= $(window).width()-50) {
                    block.x = 0;
                }
                block.canvas.css('left', block.x);
                block.canvas.css('top', block.y);
            }

            $(document).ready(function() {
                $("body").append("<div id=block style='position:absolute;width:33px;height:33px;background:green' class=block></div>")
                block = [];
                block.canvas = $('#block');
                block.x = 0;
                block.y = 55;

                window.requestAnimFrame = (function(){
                  return  window.requestAnimationFrame       ||
                          window.webkitRequestAnimationFrame ||
                          window.mozRequestAnimationFrame    ||
                          function( callback ){
                            window.setTimeout(callback, 1000 / 60);
                          };
                })();


                (function animloop() {
                    requestAnimFrame(animloop);
                    gameLoop();
                })();

            });

        </script>
    </body>
</html>

make your setTimeout be 1000 instead of `1000/60` – Paul Nikonowicz Aug 15 '13 at 04:05 — Paul Nikonowicz, Aug 15 '13 at 04:05
@curtis a couple of things .. check below – woofmeow Aug 15 '13 at 04:23 — woofmeow, Aug 15 '13 at 04:23

score 2 · Answer 1 · edited May 23 '17 at 12:11

2

You are stuck with a phone that doesn't have much processing power to deal with the changes so fast.

There are 2 ways :

Increase your callback time (as @Paul pointed out) in window.setTimeut so that your and other phone browsers can deal with the javascript. If this is not feasible. Then try the second.
Add elements using Document Fragment (this will be more efficient) : If you add elements by using the DocumentFragment then it wont cause browser reflows that is causing the flickering.

As the documentation says

Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element's position and geometry). Consequently, using document fragments often results in better performance.

You could also check my answer to this question which is somewhat related.

Hope that helps :)

edited May 23 '17 at 12:11

Community

1
1

answered Aug 15 '13 at 04:20

woofmeow

2,370
16
13

I'm not adding anything to the DOM during the loop. I'm only changing the css of one div. Also I tried changing the FPS to 30 and it still happens but less often. I would like it to be smoother than 30 fps. I have plenty of extra CPU power it's just deciding not to repaint properly for some reason. – Curtis Aug 15 '13 at 04:43
@curtis what happens is when you change css the browser has to recompute everything and that takes memory. Instead if you try to add elements to dom from a domfragment then it will not do as many reflow computations for the layout. The plus point also being it will work more smoothly because of 2 reasons - 1) lesser reflows and 2) already will have elements in the memory (may not be applicable to your case but a better strategy anyways). – woofmeow Aug 15 '13 at 04:48
Was i clear ? If not you can tell me .. maybe i misunderstood @curtis – woofmeow Aug 15 '13 at 05:18

score 0 · Answer 2 · answered Aug 16 '13 at 12:08

have you tried using GPU accelerated animations? They should give you better results as they are actually tied to the video driver refresh rate. Managing animations using JavaScript is not going to be your best option. And the other answer is probably on the right path, most Android devices are hardware deficient, even the S3 so you get issue like that. I have a Nexus 7 I test things on and many times it just cant handle simple things like this compared to my iPad2 and Windows 8 devices (tablets & phones).

This might be a reasonable article to demonstrate the differences, http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

I am running it on my Lumina 920 (windows phone) and it works just fine BTW. — Chris Love, Aug 16 '13 at 12:12

Why does moving div leave a trail in javascript on phone?

2 Answers2