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

原创 2013年12月23日 09:10:46

网页开发要面对各种各样的浏览器,让人很头疼,而移动开发中,你不但要面对浏览器,还要面对各种版本的手机,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 = " "; 这样改变输入框的值后,就可以正常输入了。





HTML5-canvas擦除无效

HTML5-canvas擦除无效 部分安卓手机上会出现canvas内图表重叠,并且清除无效,属于偶现缺陷,非常难以确定其产生原因,比如下图这个样子,第一次绘制的图形没有擦除,导致第二次绘制时出现重影:...
  • yuhk231
  • yuhk231
  • 2017年01月12日 11:51
  • 2007

HTML5 Canvas遇到的几个问题

最近在一个项目中尝试通过Hybrid的方式开发客户端程序,来尽量降低由于程序业务逻辑或者显示界面的改变而来的升级困扰。Hybrid的方式就是本地代码和HTML5应用相结合的方式,其中本地代码负责和底层...
  • mydeman
  • mydeman
  • 2013年09月17日 12:24
  • 14223

移动端开发所需要的一些资源与小技巧

mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些...
  • bboyjoe
  • bboyjoe
  • 2016年09月22日 18:25
  • 3460

移动开发必知必会的六大数据统计平台(入门篇)

数据统计对于各位移动开发的童鞋并不陌生,小到Bug统计,大到数据分析,一款性能稳定、用户体验良好的APP一定离不开数据统计的支持,为此我将给大家科普一下常用的六大数据统计平台。...
  • mynameishuangshuai
  • mynameishuangshuai
  • 2017年05月19日 17:07
  • 4335

bugfree如何修改Bug7种解决方案的标注方法

Bug有7种解决方案的标注方法By Design- 就是这么设计的,无效的Bug Duplicate - 这个问题别人已经发现了,重复的Bug External - 是个外部因素(比如浏览器、操作系统...
  • wangchenggggdn
  • wangchenggggdn
  • 2010年12月07日 17:16
  • 12278

HTML常见BUG速记

  一、IE边框若显若无,须注意,定是高度设置已忘记;  二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;  三、三像素文本慢移不必慌,高度设置帮你忙;  四、兼容各个浏览须注意,...
  • ronnie201314
  • ronnie201314
  • 2011年01月25日 15:47
  • 896

移动端 html5 锁死不让滚动条滚动

  • 2014年06月13日 16:24
  • 696B
  • 下载

移动端bug总结和一些奇淫技巧

我自己的总结: 1、uc浏览器的flexbox兼容性bug,在父元素上应用flex属性时,子元素要display: block,否则没有效果。 2、android上的uc浏览器父元素displa...
  • Teal01
  • Teal01
  • 2016年09月03日 16:21
  • 2697

web移动端常见BUG

web移动开发常见bug(1)
  • xiongxing90
  • xiongxing90
  • 2016年03月15日 14:44
  • 2003

移动web前端开发之常见bug

1.ios6修复了css position:fixed 1像素抖动的bug,不过引出另一个bug:当给指定元素添加 position:fixed时首次加载页面完成后,滑动整个网页,添加此样式的元素 会...
  • aspwzmuma
  • aspwzmuma
  • 2014年10月16日 10:54
  • 2585
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:移动开发中一些bug及解决方案
举报原因:
原因补充:

(最多只允许输入30个字)