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

Safari: Absolutely positioned DIVs not moving when updated via DOM

本文关键字：更新 DOM 移动 定位 DIV Safari      更新时间：2023-09-26

我正试图使用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不喜欢长浮点值。。。什么都没有，他们只是坐在那里，直到调整窗口大小。。。

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

谢谢，克里斯。

将top和left属性替换为transform CSS属性的translate子属性。对我来说，这解决了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毫秒是一个非常小的延迟。考虑优化您的函数，使动画执行更流畅，例如，用普通的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:...;
};

我知道这可能不是你想要的，但你可以尝试使用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（）.

相关文章：