Safari中按钮悬停缩放时相邻元素过渡抖动问题咨询

这是Safari浏览器的subpixel渲染bug，并非代码逻辑错误，原因和解决方法如下：

问题根源 #

父元素.outer使用transform: translate(0, 40%)时，可能将元素定位到了非整数像素的位置（比如容器高度的40%刚好不是整像素值）。当按钮触发scale过渡时，Safari会临时重新计算页面的像素对齐规则，导致文本元素在过渡过程中出现微小的subpixel偏移抖动；而将translate值改为50%时，刚好对应整数像素位置，因此抖动消失。

解决方法 #

以下几种方案均可解决该问题，可根据实际场景选择：

1. 开启硬件加速稳定渲染 #

给父元素或文本元素添加translateZ(0)或backface-visibility: hidden，强制浏览器将元素放入独立GPU层渲染，避免过渡时的像素对齐冲突：

.outer {
  background: orange;
  transform: translate(0, 40%) translateZ(0);
  /* 可选：提前告知浏览器元素将发生变换，触发预优化 */
  will-change: transform;
}

.lorem {
  font-size: 28px;
  transform: translateZ(0);
}

2. 使用整数像素值替代百分比translate #

如果布局允许，将父元素的百分比translate改为固定整数像素值，确保元素定位在整数像素上：

.outer {
  background: orange;
  transform: translate(0, 40px); /* 替换为合适的整像素值 */
}

3. 调整translate值到整数像素对齐的百分比 #

如果必须使用百分比，可尝试调整数值到能让元素定位在整数像素的比例（比如你发现的50%），或者用calc计算精确的整数像素比例：

.outer {
  background: orange;
  transform: translate(0, calc(50% - 0px)); /* 确保结果为整数像素 */
}

验证说明 #

以上方案均针对Safari 15.x版本的subpixel渲染问题设计，修改后按钮过渡时文本将保持稳定，不会出现抖动现象。

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