IOS webkit-overflow-scrolling: touch 踩坑筆記

標籤：恢複   屬性   一段   生產環境   ios8   translate   scroll   事件   導致   

-webkit-overflow-scrolling: touch; /* 當手指從觸控螢幕上移開，會保持一段時間的滾動 */

-webkit-overflow-scrolling: auto; /* 當手指從觸控螢幕上移開，滾動會立即停止 */

overflow:auto 或scroll在ios下無效，需要用-webkit-overflow-scrolling屬性
然而 “該特性是非標準的，請盡量不要在生產環境中使用它！”

橡皮筋事件會導致卡頓，要幾秒之後才能恢複正常。

解決方案是
-webkit-overflow-scrolling: touch; /*MAKES OVERFLOWN OBJECTS HAVE INERTIA SCROLLING*/
-webkit-transform: translateZ(0px); /*HELPS THE ABOVE WORK IN IOS5*/
-webkit-transform: translate3d(0,0,0); /*HELPS THE ABOVE WORK IN IOS8*/
-webkit-perspective: 1000; /*HELPS THE ABOVE WORK IN IOS8*/

IOS webkit-overflow-scrolling: touch 踩坑筆記