使用了 :before 等偽元素中的其中一個來做 animation 動畫; 在 animation 動畫改變了其中的某個 rem 的值; 在這樣的前提下,又是使用有這個 bug 的版本瀏覽器,那麼就
阿新 • • 發佈:2018-12-23
今天看到一位大神在工作中遇到的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時,不在偽元素上使用動畫。