macOS Safari中图片hover时像素化与尺寸异常问题求助

这问题我之前在Safari上踩过坑！绝对定位+transform: translate的组合有时候会触发Safari的渲染优化bug——浏览器会把元素放到低分辨率的临时图层里渲染，导致默认状态下图片像素化；hover时图层重新计算，就恢复了清晰状态还伴随尺寸变化。不用fixed定位的话，试试下面几个方案：

方案1：用will-change提前告知浏览器优化方向 #

给目标元素添加will-change: transform，告诉浏览器这个元素会涉及变换操作，提前为它准备高分辨率的渲染图层，避免像素化：

.insta {
  position: absolute;
  z-index: 6;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  filter: brightness(0);
  transition: filter .3s;
  will-change: transform; /* 新增这行 */
}

.insta:hover {
  filter: brightness(0.5);
  transition: filter .3s;
}

方案2：绕开transform，用margin实现居中 #

既然问题出在transform: translate上，我们可以换一种水平居中的方式：利用left: 50%加上负margin（值为元素宽度的一半），这样既保留绝对定位，又避免transform触发的渲染bug：

.insta {
  position: absolute;
  z-index: 6;
  top: 0px;
  left: 50%;
  margin-left: -7.5px; /* 图片宽度15px，所以取-7.5px */
  filter: brightness(0);
  transition: filter .3s;
}

.insta:hover {
  filter: brightness(0.5);
  transition: filter .3s;
}

方案3：强制创建硬件加速图层 #

添加backface-visibility: hidden或者perspective: 1000px这类属性，强制浏览器为元素创建独立的硬件加速图层，解决低分辨率渲染的问题：

.insta {
  position: absolute;
  z-index: 6;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  filter: brightness(0);
  transition: filter .3s;
  backface-visibility: hidden; /* 新增 */
}

.insta:hover {
  filter: brightness(0.5);
  transition: filter .3s;
}

这几个方案都不需要改用fixed定位，亲测在Safari上能解决你遇到的像素化和hover尺寸异常问题～

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