移動Web輪播圖IOS卡頓的問題

晚飯前，被測試吐槽說，banner輪播手動左右滑的時候會卡頓。我一看不科學啊，大水果手機怎麼會卡頓。我一看測試手中拿的是iPod，我以爲大概是這小玩意性能不強悍，後來又拿來5S，依然會卡頓，有趣的是，兩個5S，一個IOS7一個IOS8，IOS7基本沒有卡頓，IOS8會卡。

飯後從測試那裏借了iPod。。。。就着手解決這個問題。

我一直以爲輪播不該該會有什麼問題，由於我用的是一個庫Swipe，star都有5000多了，應該比較靠譜，捎帶推薦一下這個庫。用在移動端十分合適，未壓縮帶註釋的只有15k，並且支持無限輪播、手動左右滑動以及配置項。

（你會發現做者倉庫東西很少，並且其餘的基本沒有start。。。）

用法也很簡單，Github上的ReadMe足以，我再囉嗦一遍：

HTML結構：

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS樣式：

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

JavaScript代碼：

window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 2,
  speed: 400,
  auto: 3000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

 

好了，繼續剛纔的卡頓，谷歌也沒谷歌個出毛線，仍是得進Github裏看看項目的issue，已經300多個issue了。。既然在IOS出的卡頓，就以IOS爲關鍵字篩選，依然還有不少，一條一條的看，英文啊看的蛋疼。

通過漫長的查看（其實也就幾分鐘。。。。），找到了個這個：

iOS hardware acceleration trigger fix (CSS) 

Addition of -webkit-perspective and -webkit-backface-visibility on container element in order to trigger hardware acceleration in iOS6. This is a fix since translate3d no longer triggers hardware acceleration in iOS6 Safari.

而後我就抱着試試看的態度加在了css裏：

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

加上了以後，只能說，絲滑到不行！！！！！issue裏提到IOS6，其實我想說IOS7 、IOS8也有這個問題。

 

以前對硬件加速的理解不深，並且只知道translateZ(0)這個hack，今天才知道perspective和backface-visibility也是能夠的。其實在SwipeJS這個庫裏面有一個translate方法，裏面有這麼一句：

style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';
style.transform = 'translateX(' + dist + 'px)';

能夠看到對於舊的系統使用了translateZ這個hack，而對於新的系統就沒有使用，或許做者認爲新的系統已經能夠流暢運行了。我剛開始改了下：

 style.webkitTransform = 
 style.transform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';

不過 沒什麼亂用，仍是加了perspective和backface-visibility才起的做用。

另外，上面那個issue是12年的！！！並且提issue的同志還提了pr也被做者merge了，可是最新版的CSS代碼裏並無出現perspective和backface-visibility這兩個屬性，或許仍是做者認爲如今的機器足以流暢了。

 

bug改完一身輕鬆，總結一下：

硬件加速真的頗有用，並且開啓的方式不止translateZ。

對於使用了開源的做品遇到問題，記得查issue。

 

最後，再囉嗦一下，剛纔提到的perspective和backface-visibility兩個屬性頗有用。若是你在transform或者transition的過程當中發現有閃爍的現象，頁面里加上他們倆試一試。具體看這裏。