使用currentColor配合color-mix导致Safari浏览器崩溃问题咨询

你遇到的页面崩溃问题，本质是循环引用导致的无限计算，并非单纯的特性支持问题：

• 你的代码里，color属性使用currentColor作为color-mix的参数之一，但currentColor本身就指向当前元素的color值，这形成了无限循环的计算依赖——浏览器需要先算出color值才能确定currentColor，但color值又依赖currentColor，Safari 16.5的渲染引擎处理这种情况时出现了卡死。
• 虽然Safari 16.5已支持color-mix特性，但这种循环引用的写法属于无效逻辑，浏览器无法正确解析，进而引发无响应。

修复方案 #

要实现“基于当前文字颜色混合白色”的效果，需避免直接在color属性里引用currentColor，可通过以下两种方式解决：

方案1：用父元素颜色作为基准 #

如果当前元素的color继承自父元素，直接用inherit替代currentColor：

.block {
  background-color: inherit;
  color: color-mix(in srgb, inherit, white 50%);
}

方案2：自定义CSS变量存储基准色 #

若需要更灵活的控制，提前用CSS变量定义基准颜色，再在color-mix中引用：

.block {
  --base-color: #333; /* 替换为你的基准色，也可从父级继承 */
  color: var(--base-color);
  background-color: inherit;
  /* 如需基于自身颜色混合，可在其他状态下使用，比如hover */
  &:hover {
    color: color-mix(in srgb, var(--base-color), white 50%);
  }
}

另外，建议升级Safari到最新版本，后续版本的渲染引擎应该修复了这种循环引用导致的崩溃问题。

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