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

Question

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

Thẻ tôi đang sử dụng có mẫu khối màu đỏ. Khi nó không được xoay hoặc xoay ở các góc vuông, nghĩa là 90, 180, 270, thì có vẻ bình thường. Tuy nhiên, bất kỳ góc độ nào khác so với điều đó và mẫu nền chuyển sang màu xanh! Tôi vừa nhận được một báo cáo về điều này từ một trong những người dùng của tôi và chưa bao giờ thấy bất cứ điều gì lạ. Tất cả các trình duyệt khác đều hoạt động bình thường, Safari 9 thường 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 làm việc xung quanh nó? Tôi đã tạo một bản giới thiệu tối thiểu tại:

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

Answer 1

Lỗi lạ thực sự. Việc thực hiện phép biến đổi trong phần tử g gói như là một biến đổi SVG không giải quyết được vấn đề.

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

https://jsfiddle.net/qe00s1mg/