macOS Safari 16.2中CSS filter:hover不生效问题求助

针对你遇到的macOS Safari 16.2里，hover状态修改filter属性无响应、点击后才部分生效的问题，这是该版本Safari的渲染引擎bug导致的，以下几种方法可以解决：

方法1：触发硬件加速修复渲染异常 #

给目标元素添加transform: translateZ(0)，强制浏览器将元素放入独立渲染层，确保hover状态的filter变化被正确触发：

/* problem-relevant CSS */
div{
  background: red;
  filter: grayscale(1);
  transform: translateZ(0); /* 新增：触发硬件加速 */
}
div:hover{
  filter: grayscale(0);
}
/* some further styling for readability */
div{
  display: flex;
  justify-content:center;
  color: white;
  padding:10px;
  font-size:25px;
}

方法2：使用will-change提前告知浏览器属性变化 #

通过will-change: filter告诉浏览器该元素的filter属性会发生动态变化，让浏览器提前做好渲染准备：

div{
  background: red;
  filter: grayscale(1);
  will-change: filter; /* 新增：提前声明属性变化 */
}
div:hover{
  filter: grayscale(0);
}

方法3：用伪元素分离背景与文本渲染 #

将背景和filter属性转移到伪元素上，避免元素自身属性冲突导致的渲染异常，同时还能让文本不受filter影响（如果需要的话）：

div{
  position: relative;
  display: flex;
  justify-content:center;
  color: white;
  padding:10px;
  font-size:25px;
  z-index: 1; /* 确保文本在伪元素上方 */
}
div::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
  filter: grayscale(1);
  z-index: -1;
  transition: filter 0.3s; /* 可选：添加过渡效果让变化更平滑 */
}
div:hover::before{
  filter: grayscale(0);
}

以上三种方法都能解决Safari 16.2的这个filter渲染bug，你可以根据实际场景选择合适的方案。

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