blurred edges on animated div when using [closed]

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

Question

I am learning to create a simple animation using a div, javascript and requestAnimationFrame. The animation is working, but with some visual issues which do not seem correct. The issues occur in multiple browsers, although I'm primarily using Chrome. I've created an example with minimal code to demonstrate the issues. I am aware of css animations, webGl, etc exist and may be superior, but want to understand why this code does not work as expected.

One issue is blurring along all edges of a moving div, especially the leading and trailing. The blurring occurs when the div moves quickly. Is this normal and unavoidable? I see the same issue when playing with code written by other people, through that may only mean we are all making the same mistake. I want to render a crisp image, not a blurred image. I'm hoping that as a newbie to animation I'm making a really dumb mistake that is easy to fix.

Another issue are occasional blink effects along the trailing edge of a moving div. They don't occur on every frame. Based on Chrome timeline the frame rates are fine. I have no clue when is causing this.

The example code runs everywhere, but is sized for a desktop.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
    <style>
        .testAnim {
            background: red;
            height: 100px;
            width:  100px;
            position: absolute;
        }
    </style>
</head>
<body width="100%" height="100%" >
    <div id="testAnim1" class="testAnim"></div>

    <script>

        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

        var movers = document.querySelectorAll('.testAnim');
        for(var m = 0; m < movers.length; m++) {
          movers[m].posX = 20;  
          movers[m].posY = 10;  
          movers[m].deltaX = 20;
          movers[m].deltaY = 0; 
        };

        function update(timestamp) {

          for(var m = 0; m < movers.length; m++) {

      if (((movers[m].posX + 5 + movers[m].deltaX) > 1200) ||
          ((movers[m].posX - 5 + movers[m].deltaX) < 0)) {
        movers[m].deltaX *= -1;
      };
      if (((movers[m].posY + 5 + movers[m].deltaY) > 500) ||
          ((movers[m].posY - 5 + movers[m].deltaY) < 0)) {
        movers[m].deltaY *= -1;
      };
      movers[m].posX += movers[m].deltaX;
      movers[m].posY += movers[m].deltaY;      

      movers[m].style.left = movers[m].posX + 'px';
      movers[m].style.top = movers[m].posY + 'px';
      //movers[m].style.webkitTransform = "translate3d( "+ movers[m].posX +"px, "+ movers[m].posY +"px, "+ 0 +"px)";
          };
            window.requestAnimationFrame( update );
        };

        window.requestAnimationFrame( update );
    </script>
</body>

Was it helpful?

Solution

No answer was found. Given the terrible performance of moving html divs this question was more academic than practical.

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