Me acabo de encontrar con un problema muy extraño que solo aparece en Safari 10. Tengo naipes, imágenes svg, que a veces se rotan usando transform:rotate(xdeg).
La tarjeta que estoy usando tiene un patrón de bloque rojo. Cuando no está girado o girado en ángulo recto, es decir, 90, 180, 270, entonces parece normal. Pero, cualquier otro ángulo que no sea ese y el patrón de fondo se vuelve azul. Acabo de recibir un informe sobre esto de uno de mis usuarios y nunca he visto nada tan extraño. Todos los demás navegadores funcionan normalmente, Safari 9 lo hace normalmente.
Supongo que esto es solo un error realmente extraño en Safari 10, pero ¿alguna idea sobre cómo solucionarlo? He creado una reproducción mínima en:
Respuestas:
Cierto error extraño. Realizar la transformación en el
gelemento de envoltura como una transformación SVG no resuelve el problema.Sin embargo, al realizar una rotación 3D en lugar de una 2D, es decir
inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)';, resuelve el problema, puede verlo aquí.https://jsfiddle.net/qe00s1mg/
fuente