Перерывы анимации вращения CSS в Safari

Question

Сегодня я наткнулся на странное поведение в Safari и не могу понять, в чем причина проблемы.

При создании анимации, которая вращает элемент SVG по определенному шаблону, когда все отлично работает в ChromeSafari показывает только половину SVG на каждом шаге анимации.

Когда я удаляю background-color: white; из элемента .container, все работает нормально.Как бы цвет фона вызывал такое поведение?

Вот демонстрационное видео, а также соответствующий JSFiddle:

JsFiddle: https://jsfiddle.net/04zgmbup/

Chrome (ожидается):

Safari (неожиданно):

Answer 1

Хорошо, очевидно, я решил эту проблему.

Кажется, Safari обрабатывает фон контейнера как плоскость. Это означает, что когда элемент вращается, одна половина всегда будетповорачиваться за контейнером, который имеет белый фоновый цвет, который покрывает сам элемент.

Я до сих пор не знаю, почему другие браузеры не ведут себя так.Возможным решением для Safari может быть translateZ(width /2) элемент, чтобы все повороты происходили перед плоскостью фона.

Вот обновленная скрипка, работающая в Safari: https://jsfiddle.net/04zgmbup/1/

Проблему можно легко визуализировать, придав контейнеру полупрозрачный цвет фона.На приведенной ниже записи ясно видно, что полукруг поворачивается за контейнером.