Safari: DIVs absolutamente posicionados que no se mueven cuando se actualizan a través de DOM

Intento animar algunos DIVs absolutamente posicionados en la página usando JS para actualizar las properties superiores e izquierdas de CSS. No es un problema en Chrome, FF e incluso IE8, pero testing en Safari 5, simplemente se sientan allí … Extrañamente, si cambio el tamaño de la window de Safari, actualizarán su position …

Puedes ver una demostración aquí:

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

El código que actualiza los DIV es realmente simple, solo un poco de jQuery (también actualiza la rotation, que funciona bien en 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' }); 

He agregado la position: en relación con el cuerpo … Agregué el 'px' y networkingondeé los numbers en caso de que a Safari no le gustaran los valores de punto flotante largo … Nada, simplemente se quedan allí hasta que la window cambie de tamaño. ..

Cualquier pensamiento o ayuda, mucho-o apreciado!

Gracias, Chris.

Reemplace las properties top e left con la propiedad secundaria translate de la propiedad CSS de transform . Para mí, esto resolvió el problema en Safari 5.

Además, no use arguments de cadena para setInterval .

Demostración: 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 milisegundos es una demora muy pequeña. Considere la optimization de sus funciones, para que la animation sea más fluida, por ejemplo, reemplazando los methods de jQuery con JavaScript simple:

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

Sé que esto podría no ser exactamente lo que estás buscando, pero podrías intentar usar .offset () de jQuery para cambiar su position, en lugar de cambiar manualmente sus attributes CSS. Tu código se vería así:

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

¡Espero que eso ayude!

PD: si estás buscando establecer la position relativa , usa .position () de jQuery.