Javascript Safari：绝对定位的div在通过DOM更新时不移动

我正在尝试使用JS在页面上设置一些绝对定位的div的动画，以更新顶部和左侧的CSS属性。Chrome、FF甚至IE8都没有问题，但在Safari 5中尝试一下，他们只是坐在那里。。。奇怪的是，如果我调整Safari窗口的大小，他们会更新他们的位置

您可以在此处看到它的演示：

更新div的代码非常简单，只是一点jQuery（还更新了旋转，在Safari中工作得很好）：

我添加了位置：相对于身体。。。我添加了“px”并将数字四舍五入，以防Safari不喜欢长浮点值。。。没什么，他们只是坐在那里直到窗口调整大小

任何想法或帮助，非常感谢

谢谢，

---

Chris。

我知道这可能不是您想要的，但您可以尝试使用jQuery更改其位置，而不是手动更改其CSS属性。您的代码如下所示：

$(this.elem).css({
 '-webkit-transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
 '-moz-transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
 'transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)'
})
.offset({
 top: Math.round(this.yPos),
 left: Math.round(this.xPos)
});

我希望这有帮助

---

PS：如果要设置相对位置，请使用jQuery。

将

顶部

和

左侧

属性替换为属性的

翻译

子属性。对我来说，这解决了Safari 5中的问题

另外，不要为

setInterval

使用字符串参数

演示： 50毫秒是一个非常小的延迟。考虑优化你的函数，使动画更流畅，例如，用香草JavaScript替换jQuery方法：

Bird.prototype.draw = function() {
    this.elem.style.cssText = ['-webkit-', '-moz-', '', ''].join(
        'transform:rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)' +
        ' translate(' + this.xPos + 'px,' + this.yPos + 'px);'
    ); // Result: -webkit-transform: ...;-moz-transform:...;transform:...;
};

---

嗨，罗布，谢谢你的建议！我认为在应用“平移”和“旋转”时会出现一些奇怪的情况-我的箭头开始有点疯狂（我认为这是因为它们是从轴旋转的，而不是从div的中心）。关于使用原生JS，而不是jQuery，这是一个很好的建议，我的刷新时间在50ms时有点短。还有，你知道为什么我的原始代码在FF、Chrome和IE中运行良好，但在Saf中却不行吗？干杯哦，真的很喜欢你在屏幕上附加供应商前缀的方法：）@ChrisJ我怀疑Safari跟不上更新的速度。我还没有测试过一个更低的速率，但是您应该能够很容易地发现这个bug是由太小的延迟引起的，还是由Safari本身的bug引起的。只需增加原始代码的延迟就可以发现。嗨，Sebolains。谢谢你的建议！我曾经考虑过偏移量和位置，但不确定它们除了设置CSS的左上角之外还能做什么。在一定程度上，Offset确实在Safari中发挥了作用。运动有点不稳定，我想这可能是由于根据要求的值来定位项目的计算。还有为什么Safari不喜欢我的原始版本，而FF、Chrome和IE对它很满意？再次感谢！好的，如果我去掉旋转，箭头的位置会更新的很好。因此，将旋转与左上方定位相结合似乎存在问题（解释了为什么单击“更改！”仍会移动圆-它没有旋转）。还发现这个GitHub交换声明了同样的事情：Pfft。。。好的，所以我设法让它在Safari中工作，但我希望我没有。如果我在计时器上移动1毫秒后应用rotate，那么它看起来很好，但是当我在Safari中处理一个bug时，它会让代码看起来一团糟。我想我会把Safari排除在外，直到他们修复了它（就像在Chrome中一样）——他们得到了像IE8这样的非旋转精灵！

Bird.prototype.draw = function() {
    var transform = 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)' +
                    ' translate('+ this.xPos + 'px,' + this.yPos + 'px)';
    $(this.elem).css({
          '-webkit-transform': transform,
          '-moz-transform': transform,
          'transform': transform
    });
};
// ...
var timer1 = setInterval(function(){bird1.animate();}, 50);
var timer2 = setInterval(function(){bird2.animate();}, 50);
var timer3 = setInterval(function(){bird3.animate();}, 50);

Bird.prototype.draw = function() {
    this.elem.style.cssText = ['-webkit-', '-moz-', '', ''].join(
        'transform:rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)' +
        ' translate(' + this.xPos + 'px,' + this.yPos + 'px);'
    ); // Result: -webkit-transform: ...;-moz-transform:...;transform:...;
};