html – Cannot see h1 tag on safari

I’ve a difficulty on safari with my heading.
On chrome, it has good easy animation, however on safari I am unable to even see the heading.
Can anybody discover the answer? Or simply the rationale why it’s occurring?

Thanks!

Heading CSS:

h1#index-title {
  font-family: 'GothamMedium', sans-serif;
  font-size: 160px;
  line-height: 0.99;
  margin-bottom: 56px;
  place: relative;
  /* background: linear-gradient(to proper, clear, #fff); */
  background: clear;
  -webkit-text-fill-color: clear;
  background-blend-mode: distinction;
  background: -webkit-gradient(
      linear,
      proper high,
      left high,
      color-stop(50%, clear),
      color-stop(50%, #fff)
    )
    proper;
  background: -o-linear-gradient(proper, clear 50%, #fff 50%) proper;
  background: linear-gradient(to left, clear 50%, #fff 50%) proper;
  -webkit-background-clip: textual content;
  background-size: 200% 100%;

  -webkit-animation: shownow 0.8s linear forwards;

  animation: shownow 0.8s linear forwards;
  -webkit-animation-delay: calc(var(--load-time) + 0.4s);
  animation-delay: calc(var(--load-time) + 0.4s);
}

Shownow animation:

@-webkit-keyframes shownow {
  0% {
    background: clear;
    -webkit-text-fill-color: clear;
    background-blend-mode: distinction;
    background: -webkit-gradient(
        linear,
        proper high,
        left high,
        color-stop(50%, clear),
        color-stop(50%, #fff)
      )
      proper;
    background: linear-gradient(to left, clear 50%, #fff 50%) proper;
    -webkit-background-clip: textual content;
    background-size: 200% 100%;
  }
  100% {
    -webkit-background-clip: textual content;
    -webkit-text-fill-color: clear;
    background-blend-mode: distinction;
    background-position: left;
  }
}