Safari：通过DOM更新时，绝对定位的DIV不会移动

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

你可以在这里看到它的演示：

http://www.bikelanebrakes.com/tests/flyingThing1.html

更新DIV的代码非常简单，只需要一点jQuery（也可以更新旋转，在Safari中运行得很好）：

$(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)', 'left': Math.round(this.xPos) + 'px', 'top': Math.round(this.yPos) + 'px' }); 

我添加了位置：相对于身体…我添加’px’并向下舍入数字，因为Safari不喜欢长浮点数值……没什么，他们只是坐在那里直到窗口resize。 ..

任何想法或帮助，非常赞赏！

谢谢，克里斯。

Answer 1

使用transform CSS属性的translate子属性替换top和left 属性 。 对我来说，这解决了Safari 5中的问题。

另外，不要对setInterval使用字符串参数。

演示： http ： //jsbin.com/okovov/2/

 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); 

50毫秒是一个非常小的延迟。 考虑优化您的函数，使动画执行更顺畅，例如，通过使用vanilla 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:...; }; 

Answer 2

我知道这可能不是你想要的，但你可以尝试使用jQuery的.offset（）来改变它们的位置，而不是手动改变它们的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的.position（） 。