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

问题描述

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

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

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

更新DIV的代码非常简单，只是一个bit 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' （180 / Math.PI））* -1）+'deg）'，
'left'：Math.round（this.xPos）+'px'，
'top'：Math.round （this.yPos）+'px'
}）; 
  

我添加了position：相对于body ...我添加了'px'没有什么，他们只是坐在那里，直到窗口调整大小...

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

谢谢，
Chris。

解决方案>

将顶部和属性替换为 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毫秒是一个非常小的延迟。考虑优化您的函数，使动画执行更流畅，例如，用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 ）;'
）; //结果：-webkit-transform：...;  -  moz-transform：...; transform：...; 
}; 
  

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

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

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!

Thanks, Chris.

解决方案

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.

Also, do not use string arguments for setInterval.

Demo: 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 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：通过DOM更新时，绝对定位的DIV不移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！