使用了 :before 等伪元素中的其中一个来做 animation 动画； 在 animation 动画改变了其中的某个 rem 的值； 在这样的前提下，又是使用有这个 bug 的版本浏览器，那么就

今天看到一位大神在工作中遇到的bug,所以记录下来，说不定自己以后就遇到了呢,哈哈，站在巨人的肩膀上。

参考网址：http://www.codeceo.com/article/crash-app-by-css.html

@-webkit-keyframes crashChrome {
        0%{ -webkit-transform: translateX(0rem);}
}
.anim:before{
    content: "";
    width: 3rem;
    height: 3rem;    
    border-radius: 3rem;    
    position: absolute;    
    left:5rem;    
    top: 5rem;        
    background-color: #06839f;        
    -webkit-animation: crashChrome;
}

<div class="anim"></div>

使用了 :before 等伪元素中的其中一个来做 animation 动画；

• 在 animation 动画改变了其中的某个 rem 的值；

在这样的前提下，又是使用有这个 bug 的版本浏览器，那么就会让页面崩溃。

解决方案：

• 在伪元素中使用 animation 动画时，不用 rem 单位；
• 用rem时，不在伪元素上使用动画。

睡觉，晚安！！