Animating a DIV with JavaScript renders artifacts on Chrome

Question

As an experiment, I am trying to replicate the Sprite functionality of AS3 in JavaScript without using the canvas object. I thought that using absolutely positioned divs and man

Answer 1

I had the same problem with my liteAccordion plugin. It can be fixed by setting the backface visibility to hidden on the element you're animating, as you can see here: http://jsfiddle.net/ZPQBp/1/

Answer 2

Some research shows that setTimeout could cause issues due to various reasons. You really should use requestAnimationFrame:

Timers are not accurate to the millisecond. Here are some common timer resolutions1:

• Internet Explorer 8 and earlier have a timer resolution of 15.625ms
• Internet Explorer 9 and later have a timer resolution of 4ms. Firefox
• and Safari have a timer resolution of ~10ms.
• Chrome has a timer resolution of 4ms.

Internet Explorer prior to version 9 has a timer resolution of 15.625 ms1, so any value between 0 and 15 could be either 0 or 15 but nothing else. Internet Explorer 9 improved timer resolution to 4 ms, but that’s still not very specific when it comes to animations.

Chrome’s timer resolution is 4ms while Firefox and Safari’s is 10ms. So even if you set your interval for optimum display, you’re still only getting close to the timing you want.

Reference: http://www.nczonline.net/blog/2011/05/03/better-javascript-animations-with-requestanimationframe/

Also

setTimeout doesn’t take into account what else is happening in the browser. The page could be hidden behind a tab, hogging your CPU when it doesn’t need to, or the animation itself could have been scrolled off the page making the update call again unnecessary. Chrome does throttle setInterval and setTimeout to 1fps in hidden tabs, but this isn’t to be relied upon for all browsers.

Secondly, setTimeout only updates the screen when it wants to, not when the computer is able to. That means your poor browser has to juggle redrawing the animation whilst redrawing the whole screen, and if your animation frame rate is not in synchronised with the redrawing of your screen, it could take up more processing power. That means higher CPU usage and your computer’s fan kicking in, or draining the battery on your mobile device. Nicolas Zakas does an excellent job explaining the impact timer resolution has on animation in a related article.

Reference: http://creativejs.com/resources/requestanimationframe/

Answer 3

It has something to do with subpixel positioning. If you round off to the nearest pixel you won't see those rendering errors:

thisRef.block.style.left = Math.round((x + (mouseX - ox - x) * .125)) + "px";
thisRef.block.style.top = Math.round((y + (mouseY - oy - y) * .125)) + "px";