在safari中看不到h1标签

Question

我使用视频作为背景。在chrome上，它有很流畅的动画效果，但在safari上，我甚至看不到标题。有人能找到解决方案吗？或者仅仅是它发生的原因？

谢谢!

标题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动画：

@-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;
  }
}

工作代码示例：https://codepen.io/tabitfree/pen/oNeOZPe

Answer 1

我已经将颜色从#fff改为#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>

​

Answer 2

我不明白为什么视频没有显示在你的codepen上，但这是真的，我在我的Safari (IOS14 iPad)上没有看到它。

但是，使用Stackoverflow代码片段系统并从您的代码中复制HTML和CSS，我可以在Safari上看到视频。

这是供您尝试的代码片段。

​

<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>

​

Answer 3

所以..。我想通了我的问题。

仔细检查您的字体文件。

经过大约6个小时的调试和哭，我发现我有一个损坏的字体文件。由于我是绝望的，我只是尝试下载一个新的字体文件，它的工作。

感谢大家对我的帮助！