background-clip:text与backface-visibility:hidden兼容性与Can I Use不符咨询

这俩兼容性问题确实有点反常识，我来帮你捋清楚背后的原因：

关于 background-clip: text 的“反向”表现 #

你说的情况其实是WebKit内核浏览器（Chrome、Safari）的一个隐性要求导致的：虽然background-clip: text现在是标准属性，Can I Use也显示无前缀支持，但Chrome和Safari必须配合-webkit-text-fill-color: transparent才能让文字透明，从而露出背景裁剪的效果。而Firefox不需要这个额外设置，直接用无前缀的background-clip: text就能生效，这就造成了你看到的“本该是WebKit私有特性，结果Firefox反而更友好”的错觉。

正确的兼容写法应该是：

.text-bg-clip {
  /* 先定义背景（比如渐变） */
  background: linear-gradient(to right, #ff0000, #00ff00);
  /* 同时写私有前缀和标准属性 */
  -webkit-background-clip: text;
  background-clip: text;
  /* 必须设置文字透明，WebKit内核才会显示裁剪效果 */
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent; /* 可选的标准写法，目前主流浏览器还没完全支持 */
}

关于 backface-visibility: hidden 在Safari失效的问题 #

这个问题同样和WebKit内核的渲染规则有关：Safari要求使用backface-visibility: hidden的元素（或者它的父元素）必须先开启3D渲染上下文，否则该属性不会生效。而Firefox和Chrome对这个要求比较宽松，哪怕没有3D上下文也能正常识别该属性。

要修复Safari的问题，你只需要给目标元素（或其父元素）添加一个触发3D上下文的属性就行，比如：

.hidden-backface {
  /* 方法1：开启3D变换上下文 */
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* 或者方法2：用空的3D变换触发渲染上下文 */
.hidden-backface {
  transform: translateZ(0);
  backface-visibility: hidden;
}

补充一句：Can I Use的支持表只是标注了属性本身是否被浏览器实现，但这类渲染引擎的隐性要求往往不会被列出来，这就是为什么你会遇到“显示支持但实际用不了”的情况。

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