Problemas con backface-visibility en Chrome

La otra vez al visitar el sitio de MagmaConf, la parte donde se muestran a los speakers no se estaba mostrando correctamente.

Ya le había pasado a otros compañeros, y al parecer tenía algo que ver con Chrome; lo comprobé al abrir la página en Firefox y ver como en esta todo se mostraba perfectamente.

Me dio curiosidad por saber que era exactamente lo que desencadenaba este comportamiento. Así que con las herramientas de desarrollo de Chrome comencé a alterar los valores para ver si podía producir el diseño correcto. Con sólo encontrar la clase que contiene el comportamiento de flip y los valores establecidos antes de que ocurra el cambio pude notar una propiedad que al parecer no estaba haciendo su trabajo.

La propiedad backface-visibility con el atributo hidden no funciona con Webkit, así que no se estaba ocultando esa parte del elemento antes de hacer el efecto de flip.

Por lo que con solo agregar los atributos que establecieran los valores que backface-visibility no establece en navegadores con webkit bastaría.

... .globes .back {
    ...
    opacity: 0;
    all 0.4s ease-in-out, opacity 0;
    ...
}

... .globes .front{
    ...
    opacity: 1;
    all 0.4s ease-in-out, opacity 0;
    ...
}

Así como modificar los atributos después de hacer el flip

... .globes .back .flip{
    ...
    opacity: 1;
    ...
}

... .globes .front .flip{
    ...
    opacity: 0;
    ...
}

Con esto se pudo lograr el efecto deseado.

Por cierto MagmaConf (anteriormente MagmaRails) es un evento que dura 3 días en los que se realizan sesiones para compartir técnicas, herramientas y experiencias sobre tecnologías web. Dense una vuelta por el sitio, este año habrá varias sorpresas y como siempre grandes personalidades e interesantes pláticas. No falten.