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

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

网页开发要面对各种各样的浏览器,让人很头疼,而移动开发中,你不但要面对浏览器,还要面对各种版本的手机,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
没有人会关心你付出过多少努力,撑得累不累,摔得痛不痛,他们只会看你最后站在什么位置,然后羡慕或者鄙夷 北京

推荐标签 标签

  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 165 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 2 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    46 引用 • 25 回帖
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 453 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    541 引用 • 672 回帖
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 724 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 185 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    285 引用 • 728 回帖
  • Bug

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

    76 引用 • 1739 回帖
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 101 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖
  • 电影

    这是一个不能说的秘密。

    120 引用 • 599 回帖
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 212 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 130 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    122 引用 • 73 回帖
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    404 引用 • 1246 回帖 • 580 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 354 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    346 引用 • 1801 回帖 • 3 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3186 引用 • 8212 回帖 • 1 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    130 引用 • 793 回帖
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 127 关注
  • CodeMirror
    1 引用 • 2 回帖 • 126 关注
  • Sym

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

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

    524 引用 • 4600 回帖 • 701 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 30 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    5 引用 • 106 回帖