web移动开发中一些bug及解决方案

网页开发要面对各种各样的浏览器，让人很头疼，而移动开发中，你不但要面对浏览器，还要面对各种版本的手机，ios好一点，而安卓就五花八门了，你可能在开发中也被它们折磨过，或者正在被它们折磨，我在这里说几个我在开发中遇到的比较难缠问题，和解决方案，给其他朋友提个醒，因为一旦碰到了这些bug，虽然解决方法不难，但是你可能要花上几个小时，几天，甚至更长时间才能解决它们，遇到这些bug的话要注意，以后发现其他bug也会继续补充，也希望你也可以把你遇到的bug或者解决方案回复给我，我会一起补充到文章里，帮助其他人一起解决问题。

bug一：

现象：

android4.0以上一部分手机的webview中，当canvas小于屏幕大小时，绘图时会出现重影，就是说一个图只绘制了一遍，却出现了两个

解决方案：

canvas外层的div需要设定属性style="overflow:visible;-webkit-transform: translateZ(0);

bug二：

现象：

Galaxy S4的webview中的canvas绘图有严重bug，无论是fillRect还是drawImage,会把0,0开始的1个像素，绘制到整个canvas，导致画面无法显示。注：此现象只出现在首次页面加载，当第二次进入页面后没有此问题。

解决方案：

galaxy s4的webview显示canvas的时候，有两个条件必须满足：

1，canvas外层的div需要设定属性style="overflow:visible;-webkit-transform: translateZ(0);"

2，页面上不得含有img标签

bug三：

现象：

android4.x中一部分手机，在改变canvas大小的时候有时会卡死。大家可能都知道，重新设定canvas的大小可以实现canvas的完全刷新，但是也会导致一部分4.x手机卡死。

解决方案：

用clearRect刷新canvas。

bug四：

现象：

WebView页面引入iScroll框架后，会导致一部分android4.x的click事件发生两次。这个其实是框架的bug，但是很多人在用，就在上周我还在群里碰到一个朋友问到了这个问题。

解决方案：

遇到的朋友不用问google或百度了，因为官方没有提供解决办法，所以目前只能弃用iScroll

备注：感谢网友［Meathill］提供信息，“可以设置click:
false，不然iScroll会用代理的方式触发一次click”，遇到问题的朋友可以试一下。

bug五：

现象：

使用HTML5的canvas进行绘图，android4.0以上，有一大部分手机会经常出现clearRect无效的bug。

解决方案：

方案1:

用

[javascript] view
plain copy







canvas.width=canvas.width

来代替

[javascript] view
plain copy







canvas.clearRect().getContext("2d").clearRect()

但是，这样做的后果，就是另有一小部分（比如国内的三星NOTE2和S4等）会出现浏览器卡死的情况。

方案2:

就是用不透明背景，对于每侦重绘的游戏或应用来说，不透明背景就不会存在清屏的问题，当然这其实是选择了绕行，对于需要将canvas背景设置成透明的情况还是没有解决。

方案3:

[javascript] view
plain copy







canvas.clearRect(0, 0, w, h);

canvas.style.visibility = ‘hidden’; // Force a change in DOM

canvas.offsetHeight; // Cause a repaint to take play

canvas.style.visibility = ‘inherit’; // Make visible again

这个会导致延时。

方案4:

[javascript] view
plain copy







canvas.clearRect(0, 0, w, h);

canvas.style.display = ‘none’;// Detach from DOM

canvas.offsetHeight; // Force the detach

canvas.style.display = ‘inherit’; // Reattach to DOM

这个会产生锯齿，但是我认为是目前最好的方案了。

方案3和方案4由网友 Codezz 提供，解决方案的出处为。

https://medium.com/@dhashvir/android-4-1-x-stock-browser-canvas-solution-ffcb939af758

bug六：

现象：

android手机，微信6.1，qq浏览器x5内核，这三个条件存在的前提下，在弹出输入框的时候，整个canvas画面会被压扁。希望微信以后升级能解决这个问题吧。

解决方案：

目前还没有找到完美的解决方案，如果有人知道，请一定告诉我。

感觉现在最好的办法就是将canvas页面和有输入框的页面分离开。

还有一种方法只能解决一部分手机的问题，就是在canvas的上一层的div中，设置style.width和style.height分别等于canvas的style.width和style.height，但是经过测试，这样只能解决一部分手机。

另外，下面是Android4.0中使用iframe时的限制或者是bug，

iframe中的bug我只遇到了一部分，然后稍微查了一下，发现原来还有很多，我就全列出来了

1，<a>标签中即使设定display:block，也会变成display:inline。

2，属性为position:fixed的元素无法点击。（另外Android的Chrome的话，如果iframe中有元素的position属性被指定为fixed或者absolute时将无法使用下拉条。）

3，document.body.scrollTop无法获取。

4，-webkit-tap-hightlight-color指定无效。

5，Anchor link无效

6，页面最下面的<a>超链接可点击，但是点击无效，页面不会跳转。

7，z-index重叠的元素，pointer-events指定无效。