现象:
浏览器:目前 safari 13.1、15.5 (其它版本暂,大概率也有问题😊)
异常现象:canvas开发的环形进度条组件,进度变化时,会重新调用canvas绘图api,但是视图没有变化。
相同逻辑在ff和chrome运行是正常的!
解决:
一番对比定位之后,发现(猜测并验证)是safari中 canvas dom未更新造成的(画布的高宽未变化,不知道是否是safari的bug还是所谓的“性能优化” 。🐶。。。)
React组件解决方案:在渲染canvas时增加key={progress},相当于每次进度变动后,需要重新创建canvas dom。(或者每次画布的高度或者宽度变化,才能触发更新,但在此处不太符合需求)