SVG berubah warna saat diputar di Safari 10

109

Saya baru saja mengalami masalah yang sangat aneh yang hanya muncul di Safari 10. Saya memiliki kartu remi, gambar svg, yang terkadang diputar menggunakan transform:rotate(xdeg).

Kartu yang saya gunakan memiliki pola blok merah. Jika tidak diputar, atau diputar pada sudut siku-siku, yaitu 90, 180, 270, maka terlihat normal. Tapi, sudut lain selain itu dan pola latar belakang berubah menjadi biru! Saya baru saja mendapat laporan tentang ini dari salah satu pengguna saya dan tidak pernah melihat sesuatu yang seaneh ini. Browser lain semuanya berfungsi normal, Safari 9 melakukannya secara normal.

Saya menduga ini hanya bug yang sangat aneh di Safari 10, tetapi ada ide tentang cara mengatasinya? Saya telah membuat repro minimal di:

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

html css svg safari Einar Egilsson
sumber
6
Pertimbangkan untuk menambahkan bug WebKit ke pelacak bug mereka , jika menurut Anda ini terkait dengan WebKit.
bersantai
2
Ini tidak terjadi pada model Mac Mini akhir 2012 saya atau pada Retina MacBook Pro 2013 saya. Mac Mini: imgur.com/zdAZoWV
X-Istence
2
Tidak terjadi pada non-retina saya MacBook Pro Late 11 dengan Safari versi 10.0 (12602.1.50.0.10)
Dave
Juga tidak terjadi di Sierra, iMac akhir 2015 - imgur.com/a/e2FyS
antonone
Tidak dapat mereproduksi di Safari pada iOS 10.0.1.
Šime Vidas

Jawaban:

79

Bug yang aneh memang. Melakukan transformasi dalam gelemen pembungkus sebagai transformasi SVG tidak menyelesaikan masalah.

Namun, dengan melakukan rotasi 3D dan bukan 2D, yaitu inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)';menyelesaikan masalah, Anda dapat melihat di sini.

https://jsfiddle.net/qe00s1mg/

masukkan deskripsi gambar di sini

metode aksi
sumber
32
Terima kasih, itu berfungsi dengan baik :) Saya menemukan bagaimana perubahan warna terjadi, itu mengganti nilai R dan B dari warna isian. Warnanya # ff0000 dan itu beralih ke # 0000ff. Saya mencoba dengan nilai yang berbeda untuk R dan B dan melihat bahwa itu selalu terbalik. Namun nilai G tidak berubah, bahkan jika Anda mencoba warna # 00FF00 warna kartu tidak akan berubah selama rotasi. Bagaimanapun, terima kasih atas penyelesaiannya, saya telah menandai jawaban ini sebagai diterima.
Einar Egilsson
19
Silakan laporkan bug di bugreport.apple.com (atau bugs.webkit.org) dengan detail tersebut.
Paul Schreiber
15
@EinarEgilsson: ... dan itu menjelaskan apa yang terjadi. Jelas, seseorang menggunakan urutan byte yang salah saat merender gambar yang diputar.
Ilmari Karonen
3
@PaulSchreiber Sebenarnya sepertinya sudah diperbaiki, orang-orang dengan versi Safari 10 yang lebih baru tampaknya tidak mendapatkan ini.
Einar Egilsson
4
@DarioOO Karena setengah benar lebih baik daripada tidak mencoba.
jpa