为什么 css "all: unset" 在 MacOS 的 Safari 浏览器中运行异常？

Question

所以基本上我做了这个情况，parent有css all: unset.

然后我注意到当我使用 Safari（版本 12.1.1 (14607.2.6.1.1)）时，它的所有子颜色只能受 * 块的影响，甚至不是内联或 !important。

但只有 color 是这样的，正如您所看到的 background-color 正在使用它自己的属性。

但它在 Chrome 中运行良好，是 safari 中的故障还是我做错了什么？我如何在 Safari 中修复它？

* {
  color: red;                   /* Text color is using this one */
  background-color: pink;
}

.Parent {
  all: unset;
}

.Child {
  color: blue;
  background-color: yellow;     /* Background color is using this one */
}

<div class="Parent">
  <div class="Child">Some Text</div>
</div>

预期结果(Chrome)
错误结果（Safari Version 12.1.1 (14607.2.6.1.1)）

Answer 1

Safari 使用特殊属性 -webkit-text-fill-color。如果你使用它，颜色有效：

* {
  color: red;                   /* Text color is using this one */
  background-color: pink;
  -webkit-text-fill-color: red;
}

.Parent {
  all: unset;
}

.Child {
  color: blue;
  background-color: yellow;     /* Background color is using this one */
  -webkit-text-fill-color: blue;
}

<div class="Parent">
  <div class="Child">Some Text</div>
</div>

@ Dan Fabulich 在下方评论了此错误：
https://bugs.webkit.org/show_bug.cgi?id=158782

为什么 css "all: unset" 在 MacOS 的 Safari 浏览器中运行异常？

Why css "all: unset" works weirdly in Safari browser for MacOS?

html

css

safari

unset