Safari:绝对定位的 DIV 在通过 DOM 更新时不会移动 [英] Safari: Absolutely positioned DIVs not moving when updated via DOM

问题描述

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

I'm trying to animate some absolutely positioned DIVs on the page using JS to update the top and left CSS properties. Not a problem in Chrome, FF and even IE8 but try it in Safari 5 they just sit there... Weirdly if I resize the Safari window they will update their position...

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

You can see a demo of it here:

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

更新 DIV 的代码非常简单，只是一点点 jQuery(也更新了旋转，这在 Safari 中工作得很好):

The code that updates the DIVs is really simple, just a bit of jQuery (also updates the rotation, that works just fine in 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 不喜欢长浮点值...没什么，他们只是坐在那里直到窗口正在调整大小...

I've added position:relative to the body... I added the 'px' and rounded down the numbers incase Safari didn't like the long floating point values... Nothing, they just sit there until the window is resized...

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

Any thoughts or help, much-o appreciated!

谢谢，克里斯.

推荐答案

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

Replace the top and left properties with the translate sub-property of the transform CSS property. For me, this solved the problem in Safari 5.

另外，不要为 setInterval 使用字符串参数.

Also, do not use string arguments for setInterval.

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 方法:

50 milliseconds is a very small delay. Consider optimizing your functions, to make the animation perform smoother, for example, by replacing jQuery methods with vanilla 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:...;
};

这篇关于Safari:绝对定位的 DIV 在通过 DOM 更新时不会移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！