Can't see h1 tag on safari-CodePudding

I have an issue on safari with my heading. I use video as background. On chrome, it has nice smooth animation, but on safari I can't even see the heading. Can anyone find the solution? Or just the reason why it is happening?

Thanks!

Heading CSS:

h1#index-title {
  font-family: 'GothamMedium', sans-serif;
  font-size: 160px;
  line-height: 0.99;
  margin-bottom: 56px;
  position: relative;
  /* background: linear-gradient(to right, transparent, #fff); */
  background: transparent;
  -webkit-text-fill-color: transparent;
  background-blend-mode: difference;
  background: -webkit-gradient(
      linear,
      right top,
      left top,
      color-stop(50%, transparent),
      color-stop(50%, #fff)
    )
    right;
  background: -o-linear-gradient(right, transparent 50%, #fff 50%) right;
  background: linear-gradient(to left, transparent 50%, #fff 50%) right;
  -webkit-background-clip: text;
  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: transparent;
    -webkit-text-fill-color: transparent;
    background-blend-mode: difference;
    background: -webkit-gradient(
        linear,
        right top,
        left top,
        color-stop(50%, transparent),
        color-stop(50%, #fff)
      )
      right;
    background: linear-gradient(to left, transparent 50%, #fff 50%) right;
    -webkit-background-clip: text;
    background-size: 200% 100%;
  }
  100% {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-blend-mode: difference;
    background-position: left;
  }
}

working codepen example: https://codepen.io/tabitfree/pen/oNeOZPe

CodePudding user response：

I have changed the color from #fff to #f0f:

h1#index-title {
  font-family: 'GothamMedium', sans-serif;
  font-size: 160px;
  line-height: 0.99;
  margin-bottom: 56px;
  position: relative;
  /* background: linear-gradient(to right, transparent, #fff); */
  background: transparent;
  -webkit-text-fill-color: transparent;
  background-blend-mode: difference;
  background: -webkit-gradient(
      linear,
      right top,
      left top,
      color-stop(50%, transparent),
      color-stop(50%, #fff)
    )
    right;
  background: -o-linear-gradient(right, transparent 50%, #f0f 50%) right;
  background: linear-gradient(to left, transparent 50%, #f0f 50%) right;
  -webkit-background-clip: text;
  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);
}
@-webkit-keyframes shownow {
  0% {
    background: transparent;
    -webkit-text-fill-color: transparent;
    background-blend-mode: difference;
    background: -webkit-gradient(
        linear,
        right top,
        left top,
        color-stop(50%, transparent),
        color-stop(50%, #f0f)
      )
      right;
    background: linear-gradient(to left, transparent 50%, #f0f 50%) right;
    -webkit-background-clip: text;
    background-size: 200% 100%;
  }
  100% {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-blend-mode: difference;
    background-position: left;
  }
}

<h1 id="index-title">Heading</h1>

CodePudding user response：

I cannot understand why the video isnt showing on your codepen but it is true, I don't see it on my Safari (IOS14 iPad).

However, using the Stackoverflow snippet system and copying the HTML and CSS from your codepen I can see the video on Safari.

Here is the snippet for you to try.

<style>
* {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  --load-time: 0;
  width: 100vw;
  height: 100vh;
  color: #fff;
}

.bg-video {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  z-index: -1;
  -o-object-fit: cover;
  object-fit: cover;
  right: 0;
  bottom: 0;
  z-index: -2;
}

h1#index-title {
  font-family: "GothamMedium", sans-serif;
  font-size: 160px;
  margin: 0 !important;
  line-height: 0.99;
  margin-bottom: 56px;
  position: relative;
  background: linear-gradient(to right, transparent, #fff);
  background: transparent;
  -webkit-text-fill-color: transparent;
  background-blend-mode: difference;
  background: -webkit-gradient(
      linear,
      right top,
      left top,
      color-stop(50%, transparent),
      color-stop(50%, #fff)
    )
    right;
  background: -o-linear-gradient(right, transparent 50%, #fff 50%) right;
  background: linear-gradient(to left, transparent 50%, #fff 50%) right;
  -webkit-background-clip: text;
  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);
  margin: 0 !important;
}

@-webkit-keyframes shownow {
  0% {
    background: transparent;
    -webkit-text-fill-color: transparent;
    background-blend-mode: difference;
    background: -webkit-gradient(
        linear,
        right top,
        left top,
        color-stop(50%, transparent),
        color-stop(50%, #fff)
      )
      right;
    background: linear-gradient(to left, transparent 50%, #fff 50%) right;
    -webkit-background-clip: text;
    background-size: 200% 100%;
  }
  100% {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-blend-mode: difference;
    background-position: left;
  }
}

</style>
<section>
  <div class="main-container">
    <h1 id='index-title'>Long heading</h1>
  </div>
  <video class='bg-video' autoplay muted>
    <source src="http://learn.shayhowe.com/assets/misc/courses/html-css/adding-media/earth.mp4" type="video/mp4">
  </video>
</section>