你的位置:首页 > 网页设计

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