滚动网格列表时Safari及移动端Chrome出现异常渲染/绘制问题

核心症状 #

页面在Safari、iPhone 11/13 Pro的Chrome、Pixel 4a的Chrome中出现无响应，滚动时部分区域空白，其他设备运行正常。

针对性排查与解决步骤 #

1. 修复视口高度计算问题 #

• 替换网格容器的min-height: 100vh为min-height: 100dvh，适配移动端浏览器动态视口（地址栏变化会影响vh值），避免布局因视口突变错乱。
• 若必须使用百分比高度，确保容器的所有父级都设置了明确的高度，防止高度计算坍塌。

2. 解决硬件加速渲染冲突 #

• 给网格容器添加transform: translateZ(0)强制触发硬件加速，修复部分浏览器网格渲染的卡顿空白问题；若无效，尝试will-change: transform告知浏览器提前优化布局。
• 若开启加速后问题加剧，立即禁用：添加transform: none，强制浏览器使用软件渲染。

3. 约束网格项内容溢出 #

• 给所有网格项添加overflow: hidden，防止内部内容（如大图片、长文本）撑破网格布局；图片需设置max-width: 100%; height: auto，文本添加word-break: break-word。

4. 兼容浏览器特定CSS属性 #

• Safari旧版本对gap支持不完善，可改用网格项的padding替代容器的gap，或添加前缀-webkit-gap做兼容。
• 暂时移除grid-auto-flow: dense属性，部分移动端浏览器对该属性的渲染存在bug，测试是否恢复正常。

5. 优化滚动相关JS逻辑 #

• 若页面有自定义滚动监听，用requestAnimationFrame包裹所有DOM操作，或添加节流函数（如每16ms执行一次），避免频繁重排重绘导致页面无响应。

验证建议 #

每次修改后在目标设备上测试滚动行为，优先排查视口高度和硬件加速问题，这是移动端网格布局故障的最常见诱因。

内容的提问来源于stack exchange，提问作者stefan