SVG cambia de color cuando se gira en Safari 10


109

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:

https://jsfiddle.net/2zv4garu/1/


6
Considere agregar un error de WebKit a su rastreador de errores , si cree que está relacionado con WebKit.
relajarse

2
Esto no sucede en mi modelo Mac Mini de finales de 2012 o en mi Retina MacBook Pro 2013. Mac Mini: imgur.com/zdAZoWV
X-Istence

2
No sucede en mi MacBook Pro Late 11 sin retina con Safari versión 10.0 (12602.1.50.0.10)
Dave

Tampoco sucede en Sierra, iMac a finales de 2015 - imgur.com/a/e2FyS
antonone

No se puede reproducir en Safari en iOS 10.0.1.
Šime Vidas

Respuestas:


79

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/

ingrese la descripción de la imagen aquí


32
Gracias, eso funciona muy bien :) Descubrí cómo ocurre el cambio de color, está cambiando los valores R y B del color de relleno. El color es # ff0000 y lo está cambiando a # 0000ff. Probé con diferentes valores para R y B y vi que siempre era a la inversa. Sin embargo, el valor de G no cambia, de hecho, si prueba el color # 00FF00, el color de la tarjeta no cambiará durante la rotación. De todos modos, gracias por la solución alternativa, he marcado esta respuesta como aceptada.
Einar Egilsson

19
Por favor, presente un error en bugreport.apple.com (o bugs.webkit.org) con esos detalles.
Paul Schreiber

15
@EinarEgilsson: ... y eso explica bastante bien lo que está sucediendo. Claramente, alguien está usando el orden de bytes incorrecto al renderizar la imagen rotada.
Ilmari Karonen

3
@PaulSchreiber En realidad, parece que ya se ha solucionado, las personas con una versión más nueva de Safari 10 no parecen entenderlo.
Einar Egilsson

4
@DarioOO Porque la mitad de lo correcto es mejor que no intentarlo.
jpa
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.