Safari webkit-text-fill-color does not render in Flexbox

Using -webkit-text-fill-color is a great way to creating that knockout text effect, where you can render a gradient as the color. Take the following example:

The desired effect is for the gradient to flow across the text element. However I noticed, while redesigning this website, that sometimes it can result in rendering transparently, or nothing appears.

Example

<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, Safari will render transparently.
.child {
  display: flex;
}

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

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

Instead, switch the flexbox properties to the parent container. This will allow you to use flexbox, while preserving the knockout text effect in Safari.

It is probably safe to say that any node with the -webkit-text-fill-color property should only have a text node as children.

Enjoy using the knockout text effect, using a gradient or a color fill on text!