Question

让问题在Safari上正常运行（在Chrome和Firefox上运行正常）：https://jsfiddle.net/my794fyx/4/

在小提琴中，红色框应该从左向右移动，并有一个移动的枢轴点。通过设置left属性的动画来移动红色框。通过动画translateX()来移动枢轴点。

当悬停在黑匣子上时，移动枢轴点的重要性发挥作用：红盒子的宽度增加。红框生长的方向由枢轴点决定 - 当红框位于左侧时，它应该向右增长，当它位于右侧时，它应该增长到左侧。这可以看作在Chrome和Firefox上正常运行。

在Safari上，当您将鼠标悬停在黑匣子上并且红色框的宽度增加时，transform: translateX(-100%)似乎不会将其考虑在内。悬停时，红色框超出了黑框。

寻找浏览器问题的一些解决方法或问题的替代实现。

Answer 1

您可能想尝试使用-webkit-和transform上的@keyframes前缀，以便：

@-webkit-keyframes {
    0% {
        left: 0%;
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    100% {
        left: 100%;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

但请记住原件必须保留！并且为了安全起见，你必须添加-webkit-前缀，以防一个人不支持@keyframes没有前缀而不支持transform，尽管它更可能反过来，如上面的代码有。

另见：here

Safari变换动画无法响应动态宽度

1 个答案: