Safari CSS转换使用transform（x，y）跳跃

Question

see here the problem 我正在尝试从以下位置创建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轴上上下移动，但是在转换的开始和结束时在safari（v.12.0）中跳跃。有人知道为什么吗？