-webkit-text-fill-color, what is this miracle?

Question

css

Hello, why is this happening? There is a block with a property color: red;, and it seemed like a simple property that works everywhere, and what could go wrong here? But, not everything is so simple. In the safari browser, on the iPhone, it refused to work. The color is inherited from the parent element. The rest of the properties worked with a bang, and only the color did not want to change. I didn't know what to do anymore. But rustling with Google, I still found the property -webkit-text-fill-color, and oh Gods, it worked.
So from the question, what is it? How to protect yourself from this? Everywhere to prescribe it next to colorit is already some kind of wildness. At the moment, in the properties I have registered this:

* {
  -webkit-text-fill-color: currentcolor;
}

But this is hardly the right decision. If there are knowledgeable people, please help. And then I thought that at least I knew it, but it turned out to be him. The bourgeois browser is something, just like ie, only at the minimum.
For clarity, the code that caused the problem in safari:

<div class="content">
  <div class="text">
    <span class="colorred">текст</span>
  </div>
</div>

.content {
  color: #303030;
}
.text {
  color: inherit;
}
.colorred {
  color: red;
}

The color ended up being black. In other browsers everything worked with a bang.
Many thanks in advance for your help!
PS I'll add, it did style="color: red;"n't even help.

Answer 1

Check your CSS.
There have never been such problems with the simplest color property in Safari (and not only). So look for the problem in CSS. Something overrides the properties you need.
Screenshot of the output of your sample code in iOS Safari. Naturally - everything is in order: