La animation de errores en traducir con porcentaje en Safari / iOS agregando a través de JavaScript

Creo que encontré un error relacionado con porcentajes en Safari en las animaciones. Me gustaría saber si realmente es un error o una costumbre de Safari.

Explicación del error:

En Safari o iOS cuando inicia una animation con un porcentaje de conversión, la position es incorrecta y la animation se muestra en otro lugar.

En el siguiente ejemplo , el cuadrado no debería moverse porque la transformación es la misma y debería comenzar con un "margen" del 10% al 10% de su tamaño. El error ocurre cuando se agrega a través de JavaScript después de algún time (como 500 ms).

Si ves el error, verás un salto de 0 0 a 10% 10% en Safari y iOS.

var div = document.createElement('div'); setTimeout( function(){ document.body.appendChild(div); }, 500); 
  div { background: networking; width: 200px; height: 200px; -webkit-transform: translate(10%, 10%); -webkit-animation: 1s bugAnimation; } @-webkit-keyframes bugAnimation { from { -webkit-transform: translate(10%, 10%); background: blue; /* To see the animation */ } to { -webkit-transform: translate(10%, 10%); background: networking; /* To see the animation */ } } 

Soluciones posibles:

  • Cambiar los valores de porcentaje por unidades de vista u otro.

Obviamente, esas opciones no son válidas para todos los casos porque necesito el porcentaje pero podría ser una solución pequeña por ahora si conozco el tamaño del div (vw, vh, px …).

¿Alguien conoce este error?

Probado en Safari 10.1.1 e iOS 9.3.1 (con webview).

EDIT: Realmente necesito el translate2D porque estoy rotando un DIV en el centro de la página y el tamaño es desconocido, un ejemplo:

 var div = document.createElement('div'); setTimeout( function(){ document.body.appendChild(div); }, 500); 
  div { background: networking; width: 200px; height: 200px; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -webkit-animation: 1s bugAnimation; -webkit-transform-origin: center center; } @-webkit-keyframes bugAnimation { from { -webkit-transform: rotate(0deg) translate(-50%, -50%); } to { -webkit-transform: rotate(360deg) translate(-50%, -50%); } } 

Ok, una solución quizás use em en lugar de%

  var div = document.createElement('div'); setTimeout( function(){ document.body.appendChild(div); }, 500); 
  div { background: networking; width: 200px; height: 200px; -webkit-animation: 1s bugAnimation forwards; } @-webkit-keyframes bugAnimation { from { -webkit-transform: translate(0, 0); background: blue; /* To see the animation */ } to { -webkit-transform: translate(1.3em, 1.3em); background: networking; /* To see the animation */ } } 

Parece un problema de Mac Safari,

-webkit-transform propiedad -webkit-transform de keyframes que corrige el problema de salto en Safari y también funciona bien en Chrome. Pruebe este código,

 var div = document.createElement('div'); setTimeout( function(){ document.body.appendChild(div); }, 500); 
 div { background: networking; width: 200px; height: 200px; -webkit-transform: translate(10%, 10%); -webkit-animation: 1s bugAnimation; } @-webkit-keyframes bugAnimation { from { background: blue; /* To see the animation */ } to { background: networking; /* To see the animation */ } }