今天看到一位大神在工作中遇到的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時，不在偽元素上使用動畫。