移动端h5滑动白块等问题大概率是webview gpu合成层异常，尤其android 5.0–7.1及国产rom；可通过禁用硬件加速、检查css图层提升属性、修正viewport、规避fixed/vh陷阱等方式定位与修复。
移动端 H5 页面滑动时出现白块、顶部空白、元素错位或渲染撕裂，大概率不是 CSS 写错了，而是 WebView 的 GPU 合成层（compositor layer）管理异常——尤其在 Android 5.0–7.1 和部分国产定制 ROM（如小米、vivo）中高频复现。
确认是不是硬加速引发的合成层问题
这类问题有典型特征：页面静止时正常，一滑动就顶部“被裁”、底部漏白、固定按钮跳动、或某一块区域突然变白；且多出现在 Android WebView（Chromium 30–51 内核）中。可快速验证：
- 在 WebView 初始化后、loadUrl() 前临时加上：
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null)，再测试滑动 —— 若白块消失，基本锁定是硬件加速图层合成异常 - 检查页面是否用了触发图层提升的 CSS 属性，例如：
transform: translateZ(0)、will-change: transform、opacity: 0.99，哪怕只加在一个按钮上，也可能干扰根层合成 - 查看父容器是否设置了
overflow: hidden+position: relative组合 —— 这个组合在硬加速下极易截断合成输出
必须检查 viewport meta 标签
缺失或错放 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 会放大 Layer 异常：
- 该标签必须放在 最开头，不能靠 JS 动态插入（DOM ready 已太晚）
- 若 H5 是本地 HTML 文件，确保文件以 UTF-8 无 BOM 编码保存，BOM 头会干扰 meta 解析
- 未设置时，WebView 默认用 980px 虚拟宽度渲染，硬加速合成器会把缩放后的坐标算错，常导致顶部 10–20px 被直接裁掉，看起来就是“白块”
规避 position: fixed 与 vh 单位的陷阱
这两类写法在硬加速 WebView 中极易引发渲染偏移：
- 避免在 WebView 内部使用
position: fixed配合height: 100vh—— Android WebView 对vh的硬加速解析存在偏差，软键盘弹出后更易错位 - 若必须固定头部/底部，建议改用
position: sticky或将 fixed 元素提到 WebView 父容器外，用原生布局承载 - 慎用
top: 0; bottom: 0; left: 0; right: 0拉伸全屏，应配合明确高度容器或 flex 布局替代
补充：iOS 滑动白块要另查 touchmove 行为
iOS 下拉/上拉时顶部或底部出现白色空白，通常不是 Layer 问题，而是 webview 容器被拖动所致：
- 监听
touchmove并调用e.preventDefault()可阻止默认拖拽（注意设{ passive: false }） - 但需过滤可滚动区域（如列表容器），否则影响正常滚动体验
- 更稳妥做法是给
body加overscroll-behavior: contain（兼容 iOS 16+）或用scroll-behavior: smooth辅助收敛
