Я только что столкнулся с очень странной проблемой, которая проявляется только в Safari 10. У меня есть игральные карты, изображения svg, которые иногда меняются с помощью transform:rotate(xdeg).
На карте, которую я использую, есть красный блок. Когда он не повернут или повернут под прямым углом, то есть на 90, 180, 270, он выглядит нормально. Но при любом другом угле фоновый узор станет синим! Я только что получил сообщение об этом от одного из моих пользователей и никогда не видел ничего более странного. Все остальные браузеры работают нормально, Safari 9 работает нормально.
Я предполагаю, что это просто действительно странная ошибка в Safari 10, но есть идеи, как ее обойти? Я создал минимальное воспроизведение по адресу:
Ответы:
Действительно странная ошибка. Выполнение преобразования обертывающего
gэлемента как преобразования SVG не решает проблему.Однако, выполнив трехмерное вращение вместо двухмерного, то
inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)';есть решив проблему, вы можете увидеть здесь.https://jsfiddle.net/qe00s1mg/
источник