Safari中：当经由DOM更新绝对定位的DIV不移动Safari中：当经由DOM更新绝对定位的DI

我试图用动画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中的数字并没有像长浮点值...什么都没有，他们只是坐在那里，直到窗口大小。 ..

任何想法或帮助，多-O感谢！

谢谢，克里斯。

Answer 1:

更换top和left与性质translate的的子属性transform CSS属性 。 对我来说，这个问题解决了在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:...;
};

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（） 。

文章来源: Safari: Absolutely positioned DIVs not moving when updated via DOM