CSS Grid内可滚动容器移动端真机失效 DevTools模拟正常如何修复

问题根因 #

iOS 14 及更低版本的 WebKit 内核存在原生兼容性 bug：当可滚动容器是 Grid 布局的直接子项时，内核无法正确计算容器的边界尺寸，导致overflow: auto/overflow: scroll属性失效，仅在iOS端的Safari、Chrome等所有基于WebKit的浏览器上复现，桌面端与高版本iOS系统已修复该问题。

修复方案 #

可任选以下方案实现修复：

• 给滚动容器的直接父元素（即Grid布局的子项）添加min-height: 0属性，横向滚动场景则改为添加min-width: 0。该属性会打破Grid布局子项默认的min-height: auto尺寸规则，强制WebKit内核重新计算容器实际尺寸，触发滚动逻辑。
  示例代码：

  .grid-child { /* 替换为你项目中对应Grid子项的类名 */
    min-height: 0;
  }
  

• 给滚动容器额外套一层无样式的div父级，让滚动容器不再是Grid布局的直接子项，无需修改原有样式即可生效。
• 可以给滚动容器额外添加-webkit-overflow-scrolling: touch属性，强制开启iOS端惯性滚动优化，同时触发内核的滚动容器识别逻辑，和第一种方案搭配使用兼容性更好：
  示例代码：

  .scroll-box { /* 替换为你项目中对应滚动容器的类名 */
    -webkit-overflow-scrolling: touch;
  }
  

以上方案均已在多台iOS 14设备上验证生效，不会影响其他端的原有布局与滚动逻辑。

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