V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Get Google Chrome
Vimium · 在 Chrome 里使用 vim 快捷键
ikushi
V2EX  ›  Chrome

iOS Chrome Canvas 诡异特性

  •  
  •   ikushi · 2022-04-16 17:00:25 +08:00 via iPad · 1486 次点击
    这是一个创建于 953 天前的主题,其中的信息可能已经有所发展或是发生改变。
    试着用 canvas 做一个画板的时候,用每次触摸移动都会绘制一个圆实现。

    但在 iOS Google Chrome 上测试时,绘制时,背景逐渐出现平铺的诡异纹路。圆外切了一个白色不透明的正方形。仅在 iOS Chrome 中有触发,在电脑或 iOS Firefox 、safari 等都无触发。

    我后来简化成了定时绘制一个圆,依然有这种现象。




    复现:

    经过测试,发现触发 bug 需满足两个条件:
    1 、合适的 canvas 宽高。对于不同尺寸的屏幕(甚至横放和竖放),有不同的范围。
    2 、css 中 background-color 不为 transparent 。

    同时,若缩放屏幕达到一定程度,纹路就会消失。松开时,纹路又开始出现。

    两个解决办法:
    1 、去掉 background-color 。这个是最佳解决办法,没有任何必要设置 background-color ,只需要绘制矩形即可实现背景。
    2 、每一次绘制都把 canvas 的 imageData 先 get 出来再 set 回去。

    尽管不是啥大问题,但我非常好奇为什么为出现这种 bug:既有宽高限制,又和 css 有关,纹路也很稀奇,还把 imageData 先 get 再 set 就可以解决,并且仅在 iOS Chrome 触发。看了下源码,没有头绪。

    有大佬大概推测一下吗?

    (测试用 100.0.4896.77 (正式版本) stable (64 位元) )
    1 条回复    2022-04-16 20:01:21 +08:00
    mxT52CRuqR6o5
        1
    mxT52CRuqR6o5  
       2022-04-16 20:01:21 +08:00 via Android
    你把 chrome 的硬件加速关掉试试
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   890 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 20:37 · PVG 04:37 · LAX 12:37 · JFK 15:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.