SVG thay đổi màu khi xoay trong Safari 10

Tôi vừa gặp phải một vấn đề rất kỳ lạ chỉ hiển thị trong Safari 10. Tôi có thẻ chơi, hình ảnh svg, đôi khi được xoay vòng bằng cách sử dụng transform:rotate(xdeg).

Thẻ tôi đang sử dụng có hình khối màu đỏ. Khi nó không được xoay hoặc xoay ở các góc vuông, tức là 90, 180, 270, thì nó trông bình thường. Nhưng, bất kỳ góc nào khác ngoài góc đó và mẫu nền chuyển sang màu xanh lam! Tôi vừa nhận được báo cáo về điều này từ một trong những người dùng của mình và chưa bao giờ thấy điều gì kỳ lạ. Các trình duyệt khác đều hoạt động bình thường, Safari 9 thì hoạt động bình thường.

Tôi đoán đây chỉ là một lỗi thực sự kỳ lạ trong Safari 10, nhưng bất kỳ ý tưởng nào về cách khắc phục nó? Tôi đã tạo một bản repro tối thiểu tại:

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

Thực sự là một lỗi kỳ lạ. Thực hiện chuyển đổi trong gói gphần tử dưới dạng biến đổi SVG không giải quyết được sự cố.

Tuy nhiên, bằng cách thực hiện xoay 3D thay vì 2D, tức là inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)';sẽ giải quyết được sự cố, bạn có thể xem tại đây.

https://jsfiddle.net/qe00s1mg/