¿Por qué se distorsiona el origen de transformación en Safari, iOS?

Question

He estado construyendo un efecto de rotación de prisma usando transformaciones 3D. La propiedad transform-origin-z parecía ser la mejor para transformar las caras del prisma, pero Safari 5 y Mobile Safari inexplicablemente aumentan mi elemento, incluso cuando no se aplica ninguna transformación. Firefox 12 y Chrome 18 funcionan correctamente.

Live Demo

Full Prism Demo

estoy interesada en comprender por qué sucede esto. ¿Debo evitar por completo el transform-origin-z, o hay alguna solución alternativa para Safari y Mobile Safari?

<style> 
    /* other browser prefixes omitted for brevity */ 
    .container { 
    margin: 50px; 
    border: 2px solid #00f; 
    height: 50px; 
    -webkit-perspective: 500px; 
    } 
    .face { 
    height: 50px; 
    background-color: rgba(255,0,0,0.5); 
    -webkit-transform-origin: center center -25px; 
    -webkit-transform: translate3d(0,0,0); 
    } 
</style> 

<div class="container"> 
    <div class="face"></div> 
</div>​ 

Answer 1

Parece que esto es un error en Safari. Chrome mueve el centro de transformación sobre el eje Z, Safari abandona este centro tal como era, pero mueve el objeto sobre el eje Z. Por lo tanto, el objeto se amplió en Safari y parece más grande.

Evitaría el origen de la transformación (en el eje Z) por ahora y trabajaré con translate-Z para producir el mismo efecto.

Ejemplo:

http://jsfiddle.net/willemvb/GuhcC/3/

Answer 2

Creo que la siguiente explicación contesta el "por qué" Safari está haciendo lo que es

no tengo acceso a Safari para las pruebas, pero al leer las especificaciones para la perspective propiedad (the same spec page you point to), se indica:

los 'Perspectiv La propiedad e 'aplica la misma transformación que la función de transformación perspectiva(), excepto que solo aplica a los elementos secundarios del elemento posicionados o transformados, no a la transformación en el elemento mismo.

---

Actualización sobre la forma en que leí la especificación anterior

La propiedad 'perspectiva' se aplica la misma transformación como la perspectiva() función de transformación

Esto me dice una transformación de perspectiva se hará de la misma manera que si se aplicara transform: perspective(500px) en este caso.

excepto que se aplica sólo a los niños colocados o transformados del elemento

Esto me dice que la perspectiva de transformación se va a aplicar a elementos secundarios, en este caso .face. Aquí, parece haber algo de ambigüedad. ¿Esto significa que la perspectiva solo debe aplicarse si se realiza otra transformación en el elemento secundario? Y, ¿la propiedad tranform-origin cuenta como una transformación que se realiza al niño (especialmente dado que es este valor el que se relaciona directamente con la transformación perspective)? Es en este punto de ambigüedad donde los navegadores parecen diferir. Safari está haciendo la transformación perspective porque el elemento hijo tiene tranform-origin establecido en -25px, mientras que los demás aparentemente no (al menos, no hasta que el otro transform haga otra cosa al .face durante la animación).

no

a la transformación en el propio elemento

Esto me dice que la z=0 de .container es irrelevante, porque la transformación de esta propiedad no está afectando .container, sino más bien .container 's hijos (es decir .face)

---

Así Safari parece estar tomando la posición de que su .facesiempre tiene una transformación aplicada porque se ha configurado .container tener -webkit-perspective: 500px;, por lo que no es siempre una perspective transformar de ser aplicada a los elementos secundarios (.face en Tu caso).

Tenga en cuenta que si quita la animación y aplica un transform: perspective(500px) real al .face, tendrá see the same result in Firefox or Chrome as what you experience in Safari con su código.

Creo que en realidad, Safari puede estar haciéndolo correctamente, y quizás Firefox y Chrome no lo son. La especificación tiene cierta ambigüedad. Los otros dos navegadores tal vez deberían seguir aplicando la transformación de perspectiva basada en .container como lo hace Safari, pero parece que no lo es, mientras que Safari parece estarlo.

Para eliminar el problema (no tiene que "pegue" cuando "en reposo"), es probable que necesite

1. Animación de la transform-origin sí al comienzo de la animación (y restablece a 0 después) , O ...
2. animar el valor perspective a sí misma como 0 cuando "en reposo" y 500px cuando se animan.

Mi conjetura es # 1 será más fácil de implementar, pero no estoy seguro.

Answer 3

No sé por qué esto funcionó para mí. Parece que funciona en todos los navegadores. Básicamente, creo que estoy cancelando el efecto declaraciones css.

.container { 
    perspective: 500px; 
    transform-origin: 50% 50% 25px; 
}