微信小程序 Canvas 在IOS下，导致无法滑动、页面卡死
warning:
这篇文章距离上次修改已过960天，其中的内容可能已经有所变动。
最近在写一个活动小程序，其中有一个抽奖组件，测试的时候发现Canvas在Ios下的渲染问题。
如果用户使用苹果设备，按住Canvas绘制区域时滑动页面，会导致页面卡死，只有重启小程序才能恢复。
但是Android用户却没有任何问题。
初步排查
初步排查怀疑是Canvas这种原生组件在绘制的时候出现了问题导致的。
但是查询微信官方文档论坛，发现有人遇到了同样的问题。
原生组件渲染问题的官方回复，后续版本修复但是这篇提问是在19年5月份发的，微信官方就是10月实现了原生组件同层渲染，来解决这个问题。我检查了下基础库版本，是2.21.2，远超过要求。
同层渲染，更新所以怀疑是在ios上没有触发同层渲染，于是找了好几个设备。发现XR不正常，其他的有的正常，有的也是这样。
问题原因
抽奖组件占得区域比较大，很容易触摸到因为活动的奖品比较多，且又是在手机上，所以抽奖部分几乎占了手机屏幕上半部分。
因为原生组件最显著的一个特点就是他们会浮在所有页面组件的最顶层。
而且原生组件和小程序的其他的组件不再同一渲染体系，
就导致Canvas绘图区域把滑动事件给吞了。
所以页面就无法滑动了。
因为在调试工具下Canvas之类的都是模拟渲染，反而没有这个问题。
解决方案
经过试验，发现cover-image组件在ios下同层渲染很稳定，所以用了一个透明的图片把抽奖部分罩上，
又因为同属于原生组件，可以稳定覆盖在Canvas之上。
再次测试，一切正常。
另一个坑
因为习惯问题，我又在安卓机上测试了下......
cover-image组件在Android，下不能同层渲染了，和之前ios一样。成吧，只好进行机型判断，ios罩上，Android 去了。
const info = wx.getSystemInfoSync()
if (info.platform === 'android') {
// android 需要执行的代码
this.isIos = false;
} else {
// ios 需要执行的代码
this.isIos = true;
}至此问题妥善解决，最后一句忠告：
微信小程序，任何涉及到原生组件的调试一定要在真机上调试！Android和IOS都试一遍，不然就是大坑！！！
你好，新年好，js和css好像挂了
新年快乐，感谢提醒，已经切换了，您可以在后台切换，也可以去github拉取最新代码
这博客怎么搭的 怪好看的
感谢您对Waxy主题的喜爱，您可以移步此处获取搭建帮助 https://github.com/dingzd1995/typecho-theme-waxy