6

So basically I made this situation, the parent has the css all: unset.

Then I notice when I use Safari(Version 12.1.1 (14607.2.6.1.1)) all the children of it color only can be effected by * block, not even inline or !important.

But only color behaves that way, as you can see the background-color is using it's own property.

But it works fine in Chrome, is it a glitch in safari or I did something wrong? And how can I fix it in 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>

  • Expected result(Chrome) enter image description here

  • Wrong result(Safari Version 12.1.1 (14607.2.6.1.1)) enter image description here

Hao Wu
  • 17,573
  • 6
  • 28
  • 60
  • Same thing happened to me but for text-decoration. Only occurred on iOS 15 or lower. Probably also caused by the same bug as https://bugs.webkit.org/show_bug.cgi?id=158782 It was fixed by using -webkit-text-decoration - so I guess probably this bug will happen any time you're using "all: unset;" and then setting a property that has a webkit equivalent. And can be fixed by specifically adding the webkit versions of things as well. – Alex von Brandenfels Jan 25 '23 at 18:34

1 Answers1

6

Safari uses the special property -webkit-text-fill-color. If you use that, the color works:

* {
  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 commented the bug for this below:
https://bugs.webkit.org/show_bug.cgi?id=158782

Anonymous
  • 11,748
  • 6
  • 35
  • 57
  • Wow I didn’t know there’s a property for that and I thought `color` is for coloring texts, thanks a lot! – Hao Wu May 24 '19 at 11:29
  • But it still makes no sense that the `color` property is not working :/ – Hao Wu May 24 '19 at 11:32
  • No problem! `color` is usually used for coloring texts, but Safari is one of the few browsers that also has `-webkit-text-fill-color` to override it. It causes a lot of issues unless you know about it. – Anonymous May 24 '19 at 11:33
  • This is a filed bug on Safari. https://bugs.webkit.org/show_bug.cgi?id=158782 – Dan Fabulich Apr 03 '20 at 21:50
  • @DanFabulich Thanks. I added it to the answer – Anonymous Apr 06 '20 at 22:21
  • They fixed the bug in Safari Technology Preview 105. https://webkit.org/blog/10428/release-notes-for-safari-technology-preview-105/ It will presumably be fixed in Safari 13.2 and higher. – Dan Fabulich May 15 '20 at 16:45