title: pixel perfect image cause flicker smooth move fail rounding css transform or css transition
body: <p>I have a pixel perfect image to move around the screen.</p>
  
  <p>But the image flickers, it's not smooth moving.</p>
  
  <p>I have tried two methods:</p>
  
  <p><code>style="transform: translate(32, 0);"</code></p>
  
  <p><code>style="transition: left 2s; left: 32px;"</code></p>
  
  <p>Both methods cause flickering. Please see the example, and fix it too.</p>
  
  <p><a href="http://jsfiddle.net/ut7pcneo/1/" rel="nofollow noreferrer">http://jsfiddle.net/ut7pcneo/1/</a></p>
  
  <p>Image:
  <a href="https://i.stack.imgur.com/2KJj9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2KJj9.png" alt="pixel perfect chip"></a></p>
  
  <p>Note: see the yellow edges, that cause the flickering.</p>
  
  <h2>Edit:</h2>
  
  <p>I am trying to clone a game, but the movement has a lag.</p>
  
  <p>See the original game on html5 canvas running smoothly: <a href="http://playdosgamesonline.com/supaplex.html" rel="nofollow noreferrer">http://playdosgamesonline.com/supaplex.html</a></p>
  
  <p>See my version using dom: <a href="https://github.com/eguneys/supaplex" rel="nofollow noreferrer">https://github.com/eguneys/supaplex</a></p>