SVG cambia colore quando viene ruotato in Safari 10

109

Ho appena incontrato un problema molto strano che si presenta solo in Safari 10. Ho carte da gioco, immagini svg, che a volte vengono ruotate usando transform:rotate(xdeg).

La carta che sto usando ha un motivo a blocchi rossi. Quando non è ruotato o ruotato ad angolo retto, cioè 90, 180, 270, sembra normale. Ma qualsiasi altra angolazione oltre a quella e il motivo dello sfondo diventa blu! Ho appena ricevuto un rapporto su questo da uno dei miei utenti e non ho mai visto nulla di così strano. Tutti gli altri browser funzionano normalmente, Safari 9 lo fa normalmente.

Immagino che questo sia solo un bug davvero strano in Safari 10, ma qualche idea su come aggirarlo? Ho creato una riproduzione minima su:

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

— Einar Egilsson
fonte

Prendi in considerazione l'aggiunta di un bug WebKit al loro bug tracker , se pensi che sia correlato a WebKit.

— rilassarsi il

Questo non accade sul mio modello Mac Mini fine 2012 o sul mio Retina MacBook Pro 2013. Mac Mini: imgur.com/zdAZoWV

— X-Istence

Non succede sul mio MacBook Pro Late 11 non retina con Safari versione 10.0 (12602.1.50.0.10)

— Dave,

Inoltre non accade sulla Sierra, iMac fine 2015 - imgur.com/a/e2FyS

— antonone

Impossibile riprodurre in Safari su iOS 10.0.1.

— Šime Vidas,

Insetto davvero strano. L'esecuzione della trasformazione nell'elemento di avvolgimento gcome una trasformazione SVG non risolve il problema.

Tuttavia, eseguendo una rotazione 3D invece di una 2D, ovvero inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)';risolve il problema, puoi vedere qui.

https://jsfiddle.net/qe00s1mg/

— methodofaction
fonte

Grazie, funziona bene :) Ho capito come avviene il cambio di colore, sta cambiando i valori R e B dal colore di riempimento. Il colore è # ff0000 e lo cambia in # 0000ff. Ho provato con valori diversi per R e B e ho visto che era sempre l'inverso. Tuttavia il valore G rimane invariato, infatti se provi il colore # 00FF00 il colore della carta non cambierà durante la rotazione. Comunque, grazie per la soluzione alternativa, ho contrassegnato questa risposta come accettata.

— Einar Egilsson,

Si prega di segnalare un bug su bugreport.apple.com (o bugs.webkit.org) con questi dettagli.

— Paul Schreiber,

@EinarEgilsson: ... e questo spiega praticamente cosa sta succedendo. Chiaramente, qualcuno sta usando l'ordine dei byte sbagliato durante il rendering dell'immagine ruotata.

— Ilmari Karonen

@PaulSchreiber In realtà sembra che sia già stato risolto, le persone con una build più recente di Safari 10 non sembrano averlo capito.

— Einar Egilsson,

@ DarioOO Perché metà corretta è meglio che non provare.

— jpa