动画使用JavaScript的DIV呈现在Chrome文物 [英] Animating a DIV with JavaScript renders artifacts on Chrome

问题描述

作为一个实验，我试图复制AS3的JavaScript中的精灵功能，而不使用Canvas对象。我认为，使用绝对定位的div和操作他们的CSS属性是没有道理的，但在Chrome动画引入怪异的文物（貌似是因为重绘问题）。

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 manipulating their css properties would be a no brainer, however in Chrome the animation introduces strange artifacts (seemingly because of redraw issues).

我找不到什么，我做错了什么？在code是，其实很简单。下面是我想这并没有帮助几点：

I can not find what I am doing wrong? The code is, in fact, quite simple. Here are some points that I tried which didn't help:

• 使用相对定位的div（而不是绝对位置。）


• 使用边距（相对于顶部和放大器; left属性）


• 直接追加对象体（相对于附加到一个容器div。）


• 使用的setTimeout（相对于requestAnimationFrame）

您可以在这里看到一个简化的小提琴： http://jsfiddle.net/BVJYJ/2/​​

You can see a simplified fiddle here: http://jsfiddle.net/BVJYJ/2/

编辑： http://jsfiddle.net/BVJYJ/4/

在这里，你可以看到我的浏览器的文物：

And here you can see the artifacts on my browser:

这可能是我设置的错误（Windows 7的64位，铬21.0.1180.75）。没有其他的浏览器出现此行为。我会非常AP preciate如果有人能在我所能够做的错误的评论。我更好奇背后的原因，而不是BTW一种解决方法。这就是说，每一个解释是欢迎的。 ：）

This may be a bug in my setup (Windows 7 64 bit, Chrome 21.0.1180.75). No other browsers exhibit this behaviour. I'd greatly appreciate if someone could comment on what I could be doing wrong. I'm more curious about the reason behind this rather than a workaround btw. That said, every explanation is welcome. :)

编辑：有没有在样品code导致使用甚至当我是使用英国皇家空军的IM pression下的setTimeout的错误。 requestAnimationFrame解决了基本的转换问题，但问题仍然使用CSS转换，如旋转。

There was a bug in the sample code which resulted in using setTimeout even when I was under the impression that RAF was used. requestAnimationFrame solves the issue with basic transformation but the issue remains with CSS transformations such as rotation.

推荐答案

我有同样的问题与我liteAccordion插件。它可以通过背面的可见性设置为隐藏你的动画元素上是固定的，你可以在这里看到：的http：//的jsfiddle。净/ ZPQBp / 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/

这篇关于动画使用JavaScript的DIV呈现在Chrome文物的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！