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/

— Einar Egilsson
sumber

Pertimbangkan untuk menambahkan bug WebKit ke pelacak bug mereka , jika menurut Anda ini terkait dengan WebKit.

— bersantai

Ini tidak terjadi pada model Mac Mini akhir 2012 saya atau pada Retina MacBook Pro 2013 saya. Mac Mini: imgur.com/zdAZoWV

— X-Istence

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

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/

— metode aksi
sumber

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

Silakan laporkan bug di bugreport.apple.com (atau bugs.webkit.org) dengan detail tersebut.

— Paul Schreiber

@EinarEgilsson: ... dan itu menjelaskan apa yang terjadi. Jelas, seseorang menggunakan urutan byte yang salah saat merender gambar yang diputar.

— Ilmari Karonen

@PaulSchreiber Sebenarnya sepertinya sudah diperbaiki, orang-orang dengan versi Safari 10 yang lebih baru tampaknya tidak mendapatkan ini.

— Einar Egilsson

@DarioOO Karena setengah benar lebih baik daripada tidak mencoba.

— jpa