"Force Reflow" en transiciones CSS en Bootstrap

Question

Revisando el plugin jquery de arranque del arranque de Twitter Veo que usan transiciones CSS para el efecto de desvanecimiento.

Una cosa que me intriga desde el código es esta línea:

that.$element[0].offsetWidth // force reflow 

Si esa línea se comenta transición no funciona. Toda la referencia que he encontrado sobre su significado es ese comentario de "force reflow".

¿Cómo leer esa propiedad puede afectar las transiciones de CSS? ¿Esto es para solucionar un error en los navegadores?

Answer 1

Una respuesta tardía, pero estoy abordando algunos problemas con las transiciones de CSS, que creo que se relacionan con este código que has encontrado, ¡y espero que te ayudemos a entenderlo!

Básicamente, estoy alternando una clase de Javascript/jQuery que agrega transiciones CSS a un elemento dom. El CSS de este elemento se actualiza y causa la transición. Una versión simplificada del código es el siguiente:

var myelement = $("myselector"); 

// Set z-indexes before the transition 
myelement.css("z-index", 1); 

var reflow = root.offset().left; // Re-flow the page 

// Set the transition class on the element which will animate 
myelement.addClass("trans"); 
myelement.css("width", 0 + "px"); // Animate to nothing 

Así que si yo Descomentar mi línea de re-flujo, se producirá mi transición, pero a veces (se parece más a menudo en Safari) el índice z de MyElement no lo hará ha sido actualizado.

Para mí, parece que en ciertas situaciones, los estilos escritos en el dom se almacenan en algún lugar y no se vacían.

Ahí es donde entra la llamada al desplazamiento a la izquierda. Esta es una de las propiedades que se dice que causa un reflujo en la página. Obviamente, esto es generalmente algo malo en cuanto al rendimiento, pero parece necesario evitar que las transiciones CSS tomen los valores incorrectos.

Hay un interesante Mozilla bug alojado que trata sobre el mismo tema. Podría ser de algún interés. Sugieren la adición de una API para iniciar correctamente las transiciones del código.

Esto también es un interesting SO post sobre forzar los reflujos.

Espero que esto ayude! :)