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 года или на моем MacBook Pro Retina 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.

— Шиме Видас

Действительно странная ошибка. Выполнение преобразования обертывающего gэлемента как преобразования SVG не решает проблему.

Однако, выполнив трехмерное вращение вместо двухмерного, то 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