时间戳

首页 > 解决方案 > 如何修复在 Firefox 中消失的剪辑文本？

javascript - 如何修复在 Firefox 中消失的剪辑文本？

问题描述

我制作了一个程序，它会在短时间内交替出现一个单词。

我正在使用background-clip向文本添加渐变。该程序在 Chrome 上运行良好，但在 Firefox 中中断。进入视野后文本消失。
我检查了文本是否仍然存在，因为它是可选的，但完全透明。

function rotate() {
  let show = document.querySelector(".mask span[data-show]");
  let next =
    show.nextElementSibling || document.querySelector("span:first-child");
  let up = document.querySelector(".mask span[data-up]");

  if (up) {
    up.removeAttribute("data-up");
  }

  show.removeAttribute("data-show");
  show.setAttribute("data-up", "");

  next.setAttribute("data-show", "");
}

setInterval(rotate, 2000);
body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

h2 {
  width: 100vw;
  color: #1D1D1F;
  font-size: 6.25rem;
  line-height: 1.06em;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: -0.02em;
}

.mask {
  height: 21vh;
  overflow: hidden;
  position: relative;
  margin-top: 6px;
}

.mask span {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 100px;
  padding-bottom: 6px;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
}

.mask span[data-show] {
  transform: translateY(-100%);
  transition: transform 0.5s ease-in-out;
}

.mask span[data-up] {
  transform: translateY(-200%);
  transition: transform 0.5s ease-in-out;
}

.mask span:nth-child(1) {
  background-image: linear-gradient(45deg, #0ECFFE 50%, #0AB5F6);
}

.mask span:nth-child(2) {
  background-image: linear-gradient(45deg, #18E198 50%, #13D17B);
}

.mask span:nth-child(3) {
  background-image: linear-gradient(45deg, #8A7CFB 50%, #7256C1);
}

.mask span:nth-child(4) {
  background-image: linear-gradient(45deg, #FA7671 50%, #F6677A);
}
<body>
  <h2>
    Turn your living room into
    <div class="mask">
      <span data-show>a theater.</span>
      <span>a gym.</span>
      <span>a concert hall.</span>
      <span>an arcade.</span>
    </div>
  </h2>
</body>

小提琴链接 - https://jsfiddle.net/TechySharnav/w089ucza/（在最大化窗口中运行）

我该如何解决这个问题？有什么我可以实施的后备措施吗？

任何帮助是极大的赞赏。

标签： javascripthtmlcss

解决方案

我摆弄了一下你的代码，这就是我想出的。我真的不知道，为什么这有效而您的代码无效，因为您的代码对我来说看起来不错（除了with 似乎是一个基于您的屏幕尺寸的神奇值）height: 21vh。.mask

我所做的是，我根据h2. 我还认为，如果[data-show]元素的翻译应该为零而不是-100%. 所以我的每一个翻译都基于这个假设。

function rotate() {
  let show = document.querySelector(".mask span[data-show]");
  let next =
    show.nextElementSibling || document.querySelector("span:first-child");
  let up = document.querySelector(".mask span[data-up]");

  if (up) {
    up.removeAttribute("data-up");
  }

  show.removeAttribute("data-show");
  show.setAttribute("data-up", "");

  next.setAttribute("data-show", "");
}

setInterval(rotate, 2000);
body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

h2 {
  width: 100vw;
  color: #1D1D1F;
  font-size: 6.25rem;
  line-height: 1.06em;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: -0.02em;
}

.mask {
  height: 1.2em;
  overflow: hidden;
  position: relative;
  /*margin-top: 6px;*/
}

.mask span {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  transform: translateY(1.2em);
  padding-bottom: 6px;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  
  white-space: nowrap;
}

.mask span[data-show] {
  transform: translateY(0);
  transition: transform 0.5s ease-in-out;
}

.mask span[data-up] {
  transform: translateY(-1.2em);
  transition: transform 0.5s ease-in-out;
}

.mask span:nth-child(1) {
  background-image: linear-gradient(45deg, #0ECFFE 50%, #0AB5F6);
}

.mask span:nth-child(2) {
  background-image: linear-gradient(45deg, #18E198 50%, #13D17B);
}

.mask span:nth-child(3) {
  background-image: linear-gradient(45deg, #8A7CFB 50%, #7256C1);
}

.mask span:nth-child(4) {
  background-image: linear-gradient(45deg, #FA7671 50%, #F6677A);
}
<body>
  <h2>
    Turn your living room into
    <div class="mask">
      <span data-show>a theater.</span>
      <span>a gym.</span>
      <span>a concert hall.</span>
      <span>an arcade.</span>
    </div>
  </h2>
</body>

推荐阅读