为body设置min-height后小屏滚动时背景显示不全局部发黑

问题相关截图1
问题相关截图2
问题相关截图3

排查路径 #

按优先级从高到低依次验证：

• 优先检查背景属性：如果给body设置了background-attachment: fixed，移动端WebKit内核（Safari、微信内置浏览器、大部分国产移动端浏览器）对该属性的渲染存在已知兼容问题，滚动时GPU合成层更新不及时就会出现黑块、背景截断，尤其在body设置了min-height改变高度计算逻辑后，该问题触发概率会大幅升高。临时把该属性改为scroll测试，若黑块消失即可定位问题。
• 其次检查min-height设置逻辑：如果min-height用了100vh单位，移动端视口高度会受浏览器地址栏、底部工具栏显隐影响动态变化，固定100vh会导致body实际高度和滚动容器高度计算不一致，背景渲染区域计算偏差就会出现显示不全。可以在宽度<700px的媒体查询里临时移除body的min-height属性，若异常消失即可定位是断点适配问题。
• 最后检查层叠渲染问题：如果页面存在固定定位的header、或者元素用了transform/filter等会触发独立合成层的属性，滚动时层叠顺序计算错误也会导致背景被遮挡发黑，可以给背景元素加transform: translateZ(0)强制提升合成层测试。

可直接落地的修复方案 #

1. 替换背景挂载方式，绕开内核bug
   不要直接把背景图设置在body上，新增独立的全屏背景容器放在页面最底层，彻底规避WebKit对body固定背景的渲染问题：

   .global-bg {
     position: fixed;
     inset: 0;
     z-index: -1;
     background: #你的背景主色 url('你的背景图地址') center/cover no-repeat;
     will-change: transform;
   }
   

   把该div放在body的第一个子节点位置即可，移除原本挂在body上的背景相关属性。
2. 分断点设置min-height，不要全局生效
   加min-height的需求只是适配桌面端防止内容上移挡header，不需要在移动端保留该属性，按断点拆分设置即可：

   /* 仅桌面端生效 */
   @media (min-width: 701px) {
     body {
       min-height: calc(100vh - 固定header的高度值);
     }
   }
   /* 移动端重置默认值，靠内容自然撑开高度 */
   @media (max-width: 700px) {
     body {
       min-height: auto;
     }
   }
   

3. 兜底优化
   给html、body设置和背景图主色调一致的背景色，就算出现极端渲染延迟情况，也不会露出默认的黑色底色。

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