Safari webkit-text-fill-color cannot have flexbox as child node

TIL, that Safari will render your text as empty when using Flexbox as a child.

Take the following HTML:

<div class="parent">
   <div class="child">Gradient color text!</div>
</div>

Using CSS, .parent is given the following style:

.parent {
  background: linear-gradient(
    to right,
    red 0%,
    blue 50%,
    green 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

This will result in text that is given a gradient color. However, if .child is rendered using Flexbox, this will cause Safari to render the text transparently.

// This won't work
.child {
  display: flex;
}

Instead, switch the flexbox properties to the parent container. It is probably safe to say that any node with the ```-webkit-text-fill-color` property should only have a text node as children.

coleturner/README.md