Safari textarea font gradient animation bug

Question

I've been trying to find a solution for this bug I'm having where the text in the textarea doesn't show on load, it only shows on click or hover. It works fine in Chrome.

Screencast of the issue https://share.getcloudapp.com/P8uynjxx

See fiddle here https://jsfiddle.net/dqLrtn9x/

HTML

<textarea class="header">Pure CSS Gradient Text Animation Effect</textarea>

CSS

.header {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 6rem;
    font-weight:  100;
    letter-spacing: 2px;
    text-align: center;
    color: #f35626;
    background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 10s infinite linear;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

Does anyone know why this happens and how to fix it? Any help or direction will be appreciated

Copied from this codepen to show textarea issue https://codepen.io/caseycallow/pen/yMNqPY