模拟器上canvas显示正常，不会覆盖footer内容

真机上，如图，canvas会覆盖footer

这种有办法解决吗？

<canvas canvas-id='canvas' class='canvas' style="z-index:-1;position:relative;"></canvas>
底部
.mainFooter{
position: fixed;
bottom: 0;
display: flex;
height: 45px;
justify-content: space-around;
align-items: center;
flex: auto;
background: #fff;
border-top: 1px solid #e5e5e5;
width: 100%;
z-index: 9999;
}
<view class='mainFooter'>
<view  class='footerLeft' bindtap='baoMingDialog' data-type="2">
    <text>看房服务</text><text class="fon12">免费专车接送</text>
  </view>
  <view class="footerRight" bindtap='callMobile'>
    <text>致电售楼处</text><text class="fon12">保护你的真实号码</text>
  </view>
</view>