iOS Chrome Canvas 诡异特性

[ikushi]

试着用 canvas 做一个画板的时候，用每次触摸移动都会绘制一个圆实现。

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

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


<amp-youtube data-videoid="zZPdj7m-JKQ" layout="responsive" width="480" height="270"></amp-youtube>

复现：
https://gist.github.com/Antistable/352a02668b28a84e5cb95abb9612ad1e
经过测试，发现触发 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 位元) ）

[mxT52CRuqR6o5]

你把 chrome 的硬件加速关掉试试