5个全屏vh div首页滚动卡顿排查：第4个div触控板微抖问题

云原生阿岚

2026-5-7

针对Mac触控板下第4个100vh div滚动卡顿的排查方向

根据你描述的情况——前3个div滚动流畅，唯独第4个在Mac触控板的平滑滚动下出现卡顿，Windows鼠标几乎无感知，且已经排除了JS和背景图大小的问题——我整理了几个可能的原因，你可以逐一验证：

CSS Grid布局的实时计算开销
你的.image-portfolio-section使用了Grid布局（display: grid + grid-template-rows），虽然Grid本身性能优异，但结合100vh的高度，在Mac触控板的连续动量滚动下，浏览器需要频繁计算网格的布局位置，可能触发额外的重绘/重排。你可以临时把Grid替换成Flexbox试试：
```
.image-portfolio-section {
  /* 替换原有Grid属性 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.image-portfolio-button-container {
  margin-top: 50vh; /* 模拟原Grid中row3/4的垂直位置 */
}
```
如果卡顿消失，基本可以确定是Grid布局在连续滚动时的计算开销导致的。
Retina屏的背景图解码/渲染延迟
虽然你把图片压缩到了400kb以下，但Mac的Retina屏是高分辨率（2x/3x），浏览器在滚动到该区域时，可能需要实时对图片进行分辨率适配解码，这个过程在连续滚动时会占用GPU资源。你可以试试以下两种优化：
1. 给背景图添加GPU加速触发属性，让浏览器提前处理：
```
.image-portfolio-section {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
```
2. 将图片转换成WebP格式，它的解码性能比JPG更优，能降低渲染时的开销。
Mac触控板滚动的事件特性差异
Mac触控板的滚动是平滑动量滚动，会产生远多于Windows鼠标的连续滚动事件。如果浏览器对这个div的某些属性（比如background-size: cover的定位计算）在每一次滚动事件中都要重新计算，就容易出现卡顿。可以给元素添加will-change提示浏览器提前优化：
```
.image-portfolio-section {
  will-change: transform;
}
```
注意：will-change不要滥用，只在有问题的元素上使用即可。

图层合成的兼容性问题
某些CSS属性组合（比如background-size: cover + Grid布局）在Retina屏上可能触发浏览器不必要的图层合成操作，导致卡顿。可以把背景图放到伪元素中，让它成为独立图层：

.image-portfolio-section {
  position: relative;
  background: transparent;
}
.image-portfolio-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/DSC_3214-min.JPG');
  background-size: cover;
  background-position: center;
  z-index: -1;
  transform: translateZ(0);
}

这样把背景层和内容层分离，减少合成时的性能损耗。

隐藏的伪类或全局事件影响
虽然你提到其他JS和这个div无关，但可以暂时注释掉按钮的:hover样式测试一下——有时候浏览器会提前计算元素的hover状态样式，在连续滚动时可能产生额外开销。另外，检查是否有全局的scroll事件监听（哪怕不是你写的，比如第三方脚本），在滚动到该区域时触发了不必要的计算。

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