canvas 在safari浏览器中的兼容性问题

310 阅读1分钟

现象:

浏览器:目前 safari 13.1、15.5 (其它版本暂,大概率也有问题😊)

异常现象:canvas开发的环形进度条组件,进度变化时,会重新调用canvas绘图api,但是视图没有变化。

image.png

相同逻辑在ff和chrome运行是正常的!

解决:

一番对比定位之后,发现(猜测并验证)是safari中 canvas dom未更新造成的(画布的高宽未变化,不知道是否是safari的bug还是所谓的“性能优化” 。🐶。。。)

React组件解决方案:在渲染canvas时增加key={progress},相当于每次进度变动后,需要重新创建canvas dom。(或者每次画布的高度或者宽度变化,才能触发更新,但在此处不太符合需求)

image.png