最近在做一个移动端的页面,Chrome模拟正常,但是在部分手机中首次加载时翻页会出现闪烁现象。

排查过后确认是因为翻页用到了 transform:translate 属性,暂时还不清楚原因,期待大神解答。

Google了一下(顺便吐槽一下某度,这个问题几乎找不到有用的信息),目前解决方案大致有如下几种:

1
2
3
-webkit-backface-visibility:hidden; //隐藏转换的元素的背面
-webkit-transform-style: preserve-3d; //使被转换的元素的子元素保留其 3D 转换
-webkit-transform:translate3d(0,0,0); //开启GPU硬件加速模式,使用GPU代替CPU渲染动画(在安卓系统中有时会有莫名其妙的BUG,建议慎重)

类似问题:

http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker