CSS解決iOS滾動卡頓和滾動花屏(常年問題)

1.滾動卡頓

在滾動容器中加入如下樣式,這個樣式有時候不用加也不會卡,但是如果頁面中有fixed固定或者固底元素,則會加大卡頓發生的可能性:

-webkit-overflow-scrolling:touch; //這個屬性可以實現，手指離開屏幕會慣性滑動一段距離,從而讓滾動變的絲滑

說明：
-webkit-overflow-scrolling: touch; 當手指從觸摸屏上移開，會保持一段時間的滾動
-webkit-overflow-scrolling: auto; 當手指從觸摸屏上移開，滾動會立即停止

2.滾動花屏

bug復現效果如下:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

解決方案:

-webkit-transform: translateZ(0px); // 元素添加 -webkit-transform: translateZ(0px)屬性，解決滑動時出現的空白（即圖片不顯示）

其實個人理解就是開啓了3D渲染,強制開啓GPU渲染解決了相關渲染問題;