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

发布于 2022-09-11 14:27:18 字数 1577 浏览 20 评论 0

样式代码:

 * {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绝对定位导致

clipboard.png

改为简单的样式就可以了,如下:

* {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);}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

毁梦 2022-09-18 14:27:18

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

北笙凉宸 2022-09-18 14:27:18
canvas{pointer-events: none;}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文