网页开发要面对各种各样的浏览器,让人很头疼,而移动开发中,你不但要面对浏览器,还要面对各种版本的手机,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”,遇到问题的朋友可以试一下。
另外,下面是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指定无效。
--------------------
以下部分开始,由网友提供,感谢其他网友一起分享
--------------------
一,
[完美小盒子]:使用绝对定位的输入框,有时会无法输入东西,涉及IOS和Android所有版本的默认浏览器。 暂时没有完美的解决办法, 只有个很笨的办法,就是在onload里加上 input.value = " "; 这样改变输入框的值后,就可以正常输入了。