Safari: Absolutely positioned DIVs do not move when updating through the DOM

Question

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

Here you can see the demo:

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

The code that updates the DIVs is really simple, just a little jQuery (also updates the rotation, which works 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 added a position: in relation to the body ... I added "px" and rounded the numbers in which Safari did not like the long floating-point values ​​... Nothing, they just sit there until the window changes ...

Any thoughts or help really appreciated!

Thank you, Chris.

Answer 1

Replace the top and left properties with the translate sub-property of the CSS transform 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 smoother, for example, 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:...; }; 

Answer 2

I know this may not be exactly what you are looking for, but you can try using jQuery . offset () to change its position, as opposed to manually changing their CSS attributes. Your code will look something like this:

 $(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) }); 

I hope this helps!

PS: if you want to set the relative position, use jQuery . position () .