safari的bug

2019年9月14日 176次阅读 来源: start940315

Safari的animation bug

前端时间我在用animation写一个动画页面的时候，发现在Safari下显示异常。

问题描述：我使用rotateY让某一图片元素旋转，发现在旋转的过程中该元素只显示半边，并且它的兄弟元素都消失不见了。

animation部分代码如下：

@keyframes spinIn {
    0% {
        left: 50%;
        -webkit-transform: rotateY(0);
        -ms-transform: rotateY(0);
        transform: rotateY(0);
        opacity: 0;
    } 30% {
        opacity: 1;
    } 50% {
        opacity: 1;
        left: 50%;
        -webkit-transform: rotateY(700deg);
        -ms-transform: rotateY(700deg);
        transform: rotateY(700deg);
    } 100% {
        opacity: 1;
        left: 140px;
        -webkit-transform: rotateY(720deg);
        -ms-transform: rotateY(720deg);
        transform: rotateY(720deg);
    }
}

一开始我想，这样的bug应该直接在父元素上添加transform-style: preserve-3d;就能搞定了，但是我加了这个属性之后Safari的表现还是没变。我又加了perspective属性，发现还是没用。然后我抓头想了半天，google也搜不出结果，我就在调试的地方不停的换属性。先把animation去掉，然后在页面里面一个一个属性的去替换修改，结果我发现我在设置了perspective属性把transform-style属性去掉之后问题就消失了！！！

解决办法：把使用该animation的元素的父元素的transform-style属性去掉，加上perspective属性并设置适当的值（一般来说，可能需要设置的值的大小为5000左右，当然根据实际要求这个值会有很大的变化）。这样，Safari就能正常显示这些动画了。

欢迎大家有问题和我交流或者写下您的评论~

    原文作者：start940315
    原文地址: https://segmentfault.com/a/1190000000628921
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞