html页面滚动时元素错位解决方案

  一个布局较复杂的页面,在手机浏览器上运行时,部分配置比较差的手机会出现滚动滚动条后,页面正常滚动,但部分元素却出现类似position:fixed一般悬浮在页面上,然后再滚动。看上去有点像视差滚动,但却一点都不好看。

解决方法:在滑动体上添加样式:transform:translateZ(0);-webkite-transform:translateZ(0)。

<div style="height:300px;overflow:auto">
    <div style="transform:translateZ(0);-webkite-transform:translateZ(0);">
          各种复杂的html  
    <div>
</div>

  加这个的目的是利用GPU加速(GPU缓存)。

  因为这个问题也发现,如果使用overflow:auto这样来滑动页面(html的滚动条形式),每次页面滑动时浏览器都会有频繁的scroll、update layer tree、composite layers。应是在最后一个环节上出了问题。这个问题的原因应该是在布局方式上。

posted @   ASER_1989  阅读(1530)  评论(1编辑  收藏  举报
编辑推荐:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示