SVG змінює колір при повороті в Safari 10

109

Я щойно стикався з дуже дивною проблемою, яка з’являється лише в Safari 10. У мене є гральні карти, SVG-зображення, які іноді обертаються за допомогою transform:rotate(xdeg).

Картка, яку я використовую, має червоний блок. Якщо він не повертається або обертається під прямим кутом, тобто 90, 180, 270, то це виглядає нормально. Але будь-який інший кут, окрім цього, і фоновий малюнок стає синім! Щойно я отримав звіт про це від одного з моїх користувачів і ніколи нічого не бачив як дивне. Усі інші браузери працюють нормально, Safari 9 робить це нормально.

Я здогадуюсь, що це просто по-справжньому дивна помилка в Safari 10, але якісь ідеї щодо того, як обійти її? Я створив мінімальне запитання на:

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

— Ейнар Егільссон
джерело

Подумайте про додавання помилки WebKit до їх відстежувача помилок , якщо ви думаєте, що це пов’язано з WebKit.

— розкручується

Це не відбувається на моїй моделі Mac Mini кінця 2012 року або на моїй Retina MacBook Pro 2013 року. Mac Mini: imgur.com/zdAZoWV

— X-Istence

Не трапляється на моєму MacBook Pro Late 11, що не має сітківки, з версією Safari 10.0 (12602.1.50.0.10)

— Дейв

Також не трапляється на Sierra, iMac наприкінці 2015 року - imgur.com/a/e2FyS

— antonone

Не вдається відтворити в Safari на iOS 10.0.1.

— Šime Vidas

Справді дивна помилка. Виконання перетворення в обгортковому gелементі як перетворення SVG не вирішує проблему.

Однак, виконавши 3D обертання замість 2D, тобто inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)';вирішує проблему, ви можете побачити тут.

https://jsfiddle.net/qe00s1mg/

— методофакція
джерело

Дякую, це прекрасно працює :) Я зрозумів, як відбувається зміна кольору, це перемикання значень R і B з кольору заливки. Колір - # ff0000, і він перемикає його на # 0000ff. Я спробував з різними значеннями для R і B і побачив, що це завжди зворотне. Однак значення G не змінюється, адже якщо ви спробуєте колір # 00FF00, колір картки не зміниться під час обертання. У будь-якому випадку, дякую за вирішення, я позначив цю відповідь прийнятою.

— Ейнар Егілссон

Будь ласка, подайте помилку на bugreport.apple.com (або bugs.webkit.org) з цими деталями.

— Пол Шрайбер

@EinarEgilsson: ... і це в значній мірі пояснює те, що відбувається. Зрозуміло, що хтось використовує неправильний порядок байт під час надання поверненого зображення.

— Ільмарі Каронен

@PaulSchreiber Насправді, схоже, це вже виправлено, люди, які мають новіші можливості Safari 10, схоже, цього не отримують.

— Ейнар Егільссон

@DarioOO Тому, що наполовину правильніше, ніж не намагатися.

— jpa