Acabei de encontrar um problema muito estranho que só aparece no Safari 10. Tenho cartas de jogar, imagens SVG, que às vezes são giradas usando transform:rotate(xdeg).
O cartão que estou usando tem um padrão de bloco vermelho. Quando não é girado ou girado em ângulos retos, ou seja, 90, 180, 270, então parece normal. Mas, qualquer outro ângulo diferente desse e o padrão de fundo fica azul! Acabei de receber um relatório sobre isso de um dos meus usuários e nunca vi nada tão estranho. Todos os outros navegadores funcionam normalmente, o Safari 9 faz isso normalmente.
Suponho que este seja apenas um bug muito estranho no Safari 10, mas alguma ideia sobre como contorná-lo? Eu criei uma reprodução mínima em:
Respostas:
Bug estranho, de fato. Executar a transformação no
gelemento de empacotamento como uma transformação SVG não resolve o problema.Porém, ao realizar uma rotação 3D em vez de 2D, ou seja
inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)';, resolve o problema, você pode ver aqui.https://jsfiddle.net/qe00s1mg/
fonte