移动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的过程当中发现有闪烁的现象，页面里加上他们俩试一试。具体看这里。