bug描述
在一个h5的页面上，有一个可滑动的轮播图，轮播的内容是几个二维码。iPhone手机打开这个页面，锁屏后再亮屏，屏幕上轮播内容区域A（width 不是 100%），即二维码附近会出现线条。
出现原因
暂时不知道，debug 也没有结果。把几个元素的border设置为 0 之后，线条少了一些，但还是有一条存在。debug 发现仍旧存在的这个线条不属于任何一个块，所以排除了border的原因。网上也没有搜到类似的bug。
解决方法
虽然不知道出现的原因，但是需要想办法解决。 最后将轮播内容区域A设置为width：100%，这样就算出现线条，也会被挤到一边，消失在可预览范围内。
更新
最近做项目的时候，又遇到了 IOS 上出现的不明样式，安卓上就没有。然后用了新的解决方式：重绘。
- 使用这个样式加在出现错误样式的盒子上。
transform: translateZ(0);
- 使用定时器，使window.scrollto(0,0)，但是这样会闪一下屏，不推荐。
那么，为什么方法 1 可以解决这个问题呢？（下面内容来自link1中的回答）
'It forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.'
大意就是：浏览器应用在浏览器中运行，所以是软件进行大多数的渲染工作，但这个语句强制浏览器使用硬件 GPU 渲染，从而解决了样式上的渲染问题。
一般来说，只要和z轴有关，就能触发 GPU 渲染。
使用下面语句可以达到一样的效果。
-webkit-transform: translate3d(0,0,0);
或者
-webkit-transform: rotateZ(360deg);
refer: link1:stackoverflow.com/questions/1…
