微信小程序canvas蒙层遮盖问题

最近做了两个小程序的项目，使用了阿里的Antv-F2进行图表绘制

页面调用如下：

<view class="echart-wrapper">
    <ff-canvas 
        class="f2-canvas"
        ref="ffCanvasRef"
        id="mychart"
        canvas-id="f2-canvas"
        :onInit="onInitChart"
        :opts="chartOptions">
    </ff-canvas>
</view>

发现问题----图表绘制完成后，蒙层类组件无法盖住图表的canvas。

在出现这个问题时我尝试用以下方式来解决

方案一：用v-if来控制图表组件的显示隐藏，当蒙层组件出现时移除图表组件，关闭蒙层的时候再重绘图表组件，这样微信开发者工具运行完美，但是真机运行时，图表组件重绘时onInit 图表实例的初始化会失败

方案二：通过设置容器的宽高来解决，这也是网络上比较常见的解决方案，蒙层组件隐藏时容器的样式设置为“width: 100%;height: 14rem;overflow: hidden;”，蒙层组件显示时容器的样式设置为“width: 0;height: 0;overflow: hidden;”，这样真机运行时安卓手机仍然有问题，iOS是否有问题取决于图表组件和蒙层组件的渲染顺序

方案三（终极方案）：移出视线，蒙层组件隐藏时容器的样式设置为“position:static;”，蒙层组件显示时容器的样式设置为“position:fixed;left:1000vw;”，完美解决