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

Question

我正在尝试使用 JS 为页面上的一些绝对定位的 DIV 设置动画，以更新顶部和左侧的 CSS 属性。在 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'
});

我添加了 position:relative to body...我添加了“px”并向下舍入数字以防 Safari 不喜欢长浮点值...没有，它们只是坐在那里直到窗口调整大小...

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

谢谢， 克里斯。

Answer 1

用 transform CSS property 的 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 毫秒是一个非常小的延迟。考虑优化您的函数，使动画执行更流畅，例如，通过将 jQuery 方法替换为普通 JavaScript:

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:...;
};