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

posted @ 2015-10-22 19:39  zjzhome  阅读(5443)  评论(5编辑  收藏  举报