Переход CSS в Safari с преобразованием (x, y)

Question

смотри здесь проблему Я пытаюсь создать переход CSS из:

.menu{
 transform: translate3d(-50%, -50%, 0);
 // transform: translate(-50%, -50%); also not working properly
 transform 0.75s 0s cubic-bezier(0.7, 0, 0.3, 1);
}

до

.menu.pinned{
 transform: translate3d(-50%, 0%, 0);
 // transform: translate(-50%, 0%); also not working properly
}

Меню движется вверх и вниз по оси Y, но прыгает в сафари (v.12.0) в начале и в конце перехода. У кого-то есть идея, почему?