SVG muda de cor quando girado no Safari 10

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:

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

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/