移動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的過程中發現有閃爍的現象，頁面里加上他們倆試一試。具體看這里。