嗨，我之前也碰到过一模一样的问题！这种抖动本质上是浏览器渲染时的亚像素计算偏差加上动画触发的频繁重绘重排导致的，咱们一步步来拆解和修复：

问题根源 #

1. 你的卡片宽度用了calc(33.33333% - 1.25rem)这种百分比计算，本身就可能产生非整数的像素值（亚像素）；
2. 当card__img-box执行scale(1.1)时，浏览器需要实时重新计算元素尺寸，亚像素的偏差会被放大；
3. 同时card__link的box-shadow也在做过渡动画，两个独立的动画触发浏览器频繁重排，最终导致阴影（看起来像边框）出现抖动；
4. 你加的will-change: transform只是告诉浏览器提前准备，但没解决核心的亚像素渲染和图层冲突问题。

修复方案（亲测有效） #

我们通过强制GPU加速和统一动画图层来解决这个问题，修改后的CSS如下：

.grid-container { 
  margin-right: auto; 
  margin-left: auto; 
  padding-right: 20px; 
  padding-left: 20px; 
  max-width: 102.5rem; 
}
.card { 
  display: flex; 
  flex-flow: row wrap; 
  margin-bottom: 0; 
  margin-right: -0.625rem; 
  margin-left: -0.625rem; 
  list-style: none; 
}
.card__item { 
  flex: 0 0 auto; 
  margin-bottom: 1.25rem; 
  margin-right: 0.625rem; 
  margin-left: 0.625rem; 
  width: calc(33.33333% - 1.25rem); 
  min-width: 0; 
  min-height: 0; 
}
.card__link { 
  position: relative; 
  display: block; 
  overflow: hidden; 
  background-color: #fff; 
  box-shadow: 0 0 18.4px 1.6px rgba(0, 0, 0, 0.3); 
  /* 新增：给link也加transform过渡，统一动画图层 */
  transition: box-shadow 0.3s, transform 0.01s; 
  cursor: pointer;
  /* 新增：强制GPU加速，减少亚像素计算误差 */
  transform: translateZ(0);
}
.card__link::before { 
  content: ''; 
  display: block; 
  padding-top: 56.25%; 
}
.card__img-box { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-position: center center; 
  background-size: cover; 
  transition: transform 0.3s;
  /* 新增：显式声明变换原点，确保缩放中心稳定 */
  transform-origin: center;
  /* 新增：开启GPU加速，避免渲染偏差 */
  backface-visibility: hidden;
}
.card__text-box { 
  position: absolute; 
  top: 0; 
  left: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 100%; 
  height: 100%; 
  text-align: center; 
  color: #fff; 
}
.card__title { 
  margin-top: 0; 
  margin-bottom: 0; 
  font-size: 1.8rem; 
  font-weight: 500; 
  line-height: 1.5; 
}
/* Hover */
.card__link:hover { 
  box-shadow: 0 0 18.4px 1.6px rgba(0, 0, 0, 0.5); 
}
.card__link:hover .card__img-box { 
  transform: scale(1.1); 
}

关键修改说明： #

• transform: translateZ(0) 和 backface-visibility: hidden：这两个属性都会触发浏览器的GPU加速，把元素放到独立的硬件渲染图层，让缩放计算更精准，避免亚像素抖动；
• 给.card__link添加transform 0.01s过渡：让浏览器把阴影变化和图片缩放的动画归到同一个渲染流程里，避免因为两个独立动画导致的重排冲突；
• 显式的transform-origin: center：确保缩放始终从卡片中心开始，消除默认值可能带来的渲染差异。

如果还是有问题，可以尝试把.card__item的宽度换成固定值（配合媒体查询做响应式），但优先用上面的GPU加速方案，灵活性更高。

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