Safari: los DIV absolutamente posicionados no se mueven cuando se actualizan a través de DOM
Estoy tratando de animar algunos DIV absolutamente posicionados en la página usando JS para actualizar las propiedades CSS superior e izquierda. No es un problema en Chrome, FF e incluso IE8, pero lo prueban en Safari 5, simplemente se sientan allí ... Curiosamente, si cambio el tamaño de la ventana de Safari, actualizarán su posición ...
Puedes ver una demostración aquí:
http: //www.bikelanebrakes.com/tests/flyingThing1.htm
El código que actualiza los DIV es realmente simple, solo un poco de jQuery (también actualiza la rotación, eso 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 posición: en relación con el cuerpo ... Agregué el 'px' y redondeé los números en caso de que a Safari no le gustaran los valores largos de coma flotante ... Nada, simplemente se sientan allí hasta que la ventana cambia de tamaño ...
¡Cualquier pensamiento o ayuda, muy apreciado!
Gracias, Chris.