ios，echart.js渲染tree类型，在div层中添加了一个canvas层导致页面滑动不流畅

Question

样式代码：

 * {margin: 0; padding: 0;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;}
 html,body{margin: 0;position: relative;}
 #main,#main>div{width:1000px;height:1000px;margin:0 auto !important;box-sizing: border-box;position: absolute !important;left:50% !important;top:50% !important;margin-left: -480px !important;margin-top: -480px !important;overflow: auto !important;}     
#main{overflow: scroll}

ios手机中，滑动图形区域 不流畅 需要等页面滚动条显示 才比较流畅
用echarts.js渲染树插件结果如图：

由于div绝对定位导致

改为简单的样式就可以了，如下：

* {margin: 0; padding: 0;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;}
        html,body{margin: 0;position: relative;}
        .none-data{width: 72px;height: 72px;position: absolute;left:50%;top:50%;margin-left: -36px;margin-top: -36px;display: none;}
        .bottom-txt{position: fixed;left: 0;bottom: 0;line-height:2.5;font-size:18px;color: #ccc;margin: 0;text-align: center;width: 100%;}
        #main{width:1000px;height:1000px;margin:0 auto;box-sizing: border-box;}
        #main.fullwidth{width:100%;height:100%;}
        canvas{-webkit-transform: translateZ(0); transform: translateZ(0);}

Answer 1

已经找到 bug原因，是由于我外面div太多层position: absolute;定位导致。

Answer 2

canvas{pointer-events: none;}