【小知识点】解决Chrome动画”卡顿”的办法
生活随笔
收集整理的這篇文章主要介紹了
【小知识点】解决Chrome动画”卡顿”的办法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
為動畫DOM元素添加CSS3樣式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);這兩個屬性都會開啟GPU硬件加速模式,從而讓瀏覽器在渲染動畫時從CPU轉向GPU
webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0);或者
webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0);開啟GPU硬件加速可能觸發的問題:
通過-webkit-transform:transition3d/translateZ開啟GPU硬件加速之后,有些時候可能會導致瀏覽器頻繁閃爍或抖動,可以嘗試以下辦法解決之:
-webkit-backface-visibility:hidden; -webkit-perspective:1000;摘自---http://blog.csdn.net/hsany330/article/details/50925260
感謝博主
轉載于:https://www.cnblogs.com/winteronlyme/p/7028296.html
總結
以上是生活随笔為你收集整理的【小知识点】解决Chrome动画”卡顿”的办法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 简单的在jsp页面操作mysql
- 下一篇: 0616考试