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