网页开发要面对各种各样的浏览器,让人很头疼,而移动开发中,你不但要面对浏览器,还要面对各种版本的手机,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:
用
canvas.width=canvas.width
来代替
canvas.clearRect().getContext("2d").clearRect()
但是,这样做的后果,就是另有一小部分(比如国内的三星 NOTE2 和 S4 等)会出现浏览器卡死的情况。
方案 2:
就是用不透明背景,对于每侦重绘的游戏或应用来说,不透明背景就不会存在清屏的问题,当然这其实是选择了绕行,对于需要将 canvas 背景设置成透明的情况还是没有解决。
方案 3:
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:
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指定无效。
--------------------
以下部分开始,由网友提供,感谢其他网友一起分享
--------------------
一,
[完美小盒子]:使用绝对定位的输入框,有时会无法输入东西,涉及 IOS 和 Android 所有版本的默认浏览器。 暂时没有完美的解决办法, 只有个很笨的办法,就是在 onload 里加上 input.value = " "; 这样改变输入框的值后,就可以正常输入了。
————————————————
版权声明:本文为 CSDN 博主「lufy」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/lufy_legend/java/article/details/17498837
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于