android4.0 以上一部分手机的 webview 中 canvas BUG

本贴最后更新于 1658 天前,其中的信息可能已经水流花落

网页开发要面对各种各样的浏览器,让人很头疼,而移动开发中,你不但要面对浏览器,还要面对各种版本的手机,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

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
zhaozhizheng
没有人会关心你付出过多少努力,撑得累不累,摔得痛不痛,他们只会看你最后站在什么位置,然后羡慕或者鄙夷 北京

推荐标签 标签

  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 51 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖 • 1 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    408 引用 • 3574 回帖
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 2 关注
  • abitmean

    有点意思就行了

    29 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 2 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖 • 1 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 488 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 6 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 47 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 510 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 700 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    75 引用 • 1737 回帖 • 5 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1705 回帖 • 1 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 73 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 670 关注
  • 导航

    各种网址链接、内容导航。

    40 引用 • 173 回帖
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 2 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 4 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 595 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 1 关注