一段时间后，Chrome中的滚动文本消失

Question

我在此页面顶部创建了一个类似选取框的效果。文本被编码为连续水平滚动。文本应连续滚动，没有间隙。它在 Safari 和 Firefox 中运行，但由于某种原因在 Chrome 中，几秒钟后，它就停止了。奇怪的是，如果我突出显示我知道文本所在的区域，它会重新出现。大家知道为什么会这样吗？任何见解/帮助将不胜感激，因为我是一名学习如何编码的学生！我附上了屏幕截图，说明文本消失时它最初的样子，另一个屏幕截图显示它在我突出显示该区域后重新出现。

Screenshot of Text Disappearing

Screenshot of me Highlighting the area of the scrollable text, makes the text visible again on the page

我使用的是 MacOS Catalina 版本 10.15.7，我的 Chrome 版本是版本 87.0.4280.88（官方构建）（x86_64）。我也向朋友展示了这段代码，他们在 Chrome 中也遇到了同样的问题。

更新：看起来这个问题与溢出有关：隐藏

下面是我的html

<section class="intro section section-pad bg-cover" id="intro">
  <div class="copy container">
    <div class="marquee">
      <!-- Here we add the title in multiple repeating times using javascript --> 
      <span>Event -- January 1-2, 2020, Zoom</span>
    </div>
</section>

这是 CSS：

.section {
  /*each section will take 100% of the height of browser */
  min-height: 100vh;
  /* Will help to vertically align container box */
  display: flex;
  position: relative;
}

/* Provide padding to left and right of section */
.section-pad {
  padding-left: 5vw;
  padding-right: 5vw;
}

.container {
  /* Take the width of widest content box */
  max-width: 780px;
    /* Center our box horizontally and vertically using flex on .section */
  margin: auto;
}

.marquee {
  position: absolute;
  top: 3vh;
  left: 0;
  width: 100%;
  /*Each letter will be 5% of viewport width */
  font-size: 5vw;
  /* As tall as text */
  line-height: 1;
  text-transform: uppercase;
  /*no scrollbars */
  overflow:  hidden;

}

.marquee span {
 transform: translate3d(0, 0, 0);
-webkit-animation-name: moveLeft; 
 animation-name: moveLeft; 
 -webkit-animation-duration: 500s; 
         animation-duration: 500s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  /*This will ensure the text stays all on the same line */
  white-space: nowrap;
  /* Our span is inline by default, so change it to block */
  display: block;
  /*Help with animation */
  position: relative;
}


@keyframes moveLeft {
  0% {
   /* transform: translate(0);*/
   -webkit-transform: translatex(0);
           transform: translatex(0);
  }
  
  100% {
   /* transform: translateX(-3000vw); */
     -webkit-transform: translatex(-3000vw);
             transform: translatex(-3000vw);
  }
}



@-webkit-keyframes moveLeft {
  0% {
   /* transform: translate(0);*/
   -webkit-transform: translatex(0);
           transform: translatex(0);
  }
  
  100% {
   /* transform: translateX(-3000vw); */
     -webkit-transform: translatex(-3000vw);
             transform: translatex(-3000vw);
  }
}

最后这里是使用的 Javascript

function makeMarquee () {
  const title ='Event -- January 1-2, 2021, Zoom'


//use Array constructor to create an empty list with a length of 50 that is filled with the title. 
//We can join all the contents of array using dash
const marqueeText = new Array(500).fill(title).join(' -- ')
//query Selector same as $ jquery, grab the span tags
const marquee = document.querySelector('.marquee span')

//set the text of span to be the marqueeText
marquee.innerHTML =  marqueeText
  

}

makeMarquee()

下面也是一个片段

function makeMarquee () {
  const title ='Event -- January 1-2, 2021, Zoom'


//use Array constructor to create an empty list with a length of 50 that is filled with the title. 
//We can join all the contents of array using dash
const marqueeText = new Array(500).fill(title).join(' -- ')
//query Selector same as $ jquery, grab the span tags
const marquee = document.querySelector('.marquee span')

//set the text of span to be the marqueeText
marquee.innerHTML =  marqueeText
  

}

makeMarquee()

.section {
  /*each section will take 100% of the height of browser */
  min-height: 100vh;
  /* Will help to vertically align container box */
  display: flex;
  position: relative;
}

/* Provide padding to left and right of section */
.section-pad {
  padding-left: 5vw;
  padding-right: 5vw;
}

.container {
  /* Take the width of widest content box */
  max-width: 780px;
    /* Center our box horizontally and vertically using flex on .section */
  margin: auto;
}

.marquee {
  position: absolute;
  top: 3vh;
  left: 0;
  width: 100%;
  /*Each letter will be 5% of viewport width */
  font-size: 5vw;
  /* As tall as text */
  line-height: 1;
  text-transform: uppercase;
  /*no scrollbars */
  overflow:  hidden;

}

.marquee span {
 transform: translate3d(0, 0, 0);
-webkit-animation-name: moveLeft; 
 animation-name: moveLeft; 
 -webkit-animation-duration: 500s; 
         animation-duration: 500s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  /*This will ensure the text stays all on the same line */
  white-space: nowrap;
  /* Our span is inline by default, so change it to block */
  display: block;
  /*Help with animation */
  position: relative;
}


@keyframes moveLeft {
  0% {
   /* transform: translate(0);*/
   -webkit-transform: translatex(0);
           transform: translatex(0);
  }
  
  100% {
   /* transform: translateX(-3000vw); */
     -webkit-transform: translatex(-3000vw);
             transform: translatex(-3000vw);
  }
}



@-webkit-keyframes moveLeft {
  0% {
   /* transform: translate(0);*/
   -webkit-transform: translatex(0);
           transform: translatex(0);
  }
  
  100% {
   /* transform: translateX(-3000vw); */
     -webkit-transform: translatex(-3000vw);
             transform: translatex(-3000vw);
  }
}

<section class="intro section section-pad bg-cover" id="intro">

  <div class="copy container">
    <div class="marquee">
      <!-- Here we add the title in multiple repeating times using javascript -->
      <span>Event -- January 1-2, 2020, Zoom</span>
    </div>
  </div>

</section>

Answer 1

Chrome（和Edge）中的间隙是由在选框上设置overflow: hidden引起的。浏览器似乎感觉到他们已经展示了足够多（我不确定在这种情况下足够意味着什么，因为最大宽度设置得很低为 768px）并且他们不能显示溢出但他们继续动画所以之后50 秒从头开始。

为什么其他浏览器（Firefox、Safari）不支持我无法发现的溢出。

如果您将 .marquee 更改为具有溢出：可见，那么所有这些浏览器都将继续播放动画，没有间隙。

更新：另外部分给出了overflow: hidden，并且已更改时间和行驶距离以防止显示 x 溢出条。

function makeMarquee () {
      const title ='Event -- January 1-2, 2021, Zoom'


    //use Array constructor to create an empty list with a length of 50 that is filled with the title. 
    //We can join all the contents of array using dash
    const marqueeText = new Array(500).fill(title).join(' -- ')
    //query Selector same as $ jquery, grab the span tags
    const marquee = document.querySelector('.marquee span');

    //set the text of span to be the marqueeText
    marquee.innerHTML =  marqueeText
   // setTimeout(function () {marquee.style.animationName = 'moveLeft';},1000);
    }

    makeMarquee()

    .section {
      /*each section will take 100% of the height of browser */
      min-height: 100vh;
      /* Will help to vertically align container box */
      display: flex;
      position: relative;
      overflow: hidden; /* added to prevent 'gap' appearing on Chrome/Edge */     
    }

    /* Provide padding to left and right of section */
    .section-pad {
      padding-left: 5vw;
      padding-right: 5vw;
    }

    .container {
      /* Take the width of widest content box */
      max-width: 780px;
        /* Center our box horizontally and vertically using flex on .section */
      margin: auto;
    }

    .marquee {
      position: absolute;
      top: 3vh;
      left: 0;
      width: 100%;
      /*Each letter will be 5% of viewport width */
      font-size: 5vw;
      /* As tall as text */
      line-height: 1;
      text-transform: uppercase;
      /*no scrollbars */
      /* but - make visible otherwise Chrome/Edge stop showing overflowed bits so get a gap */
      overflow: visible; /* was hidden not visible */
    }

    .marquee span {
     transform: translate3d(0, 0, 0);
     animation-name: moveLeft;
             animation-duration: 550s; /* altered from 50s as have longer for the text to travel now */
              animation-timing-function: linear;
              animation-iteration-count: infinite;
      /*This will ensure the text stays all on the same line */
      white-space: nowrap;
      /* Our span is inline by default, so change it to block */
      display: block;
      /*Help with animation */
      position: relative;
      width: 4000vw; /* this is a bit hacky but does the trick - fools Chrome etc into thinking overflow is OK */
    }

    @keyframes moveLeft {
      0% {
               transform: translateX(0);
      }
      
      100% {
               transform: translateX(-100%);/* was 3000vw */
      }
    }

<section class="intro section section-pad bg-cover" id="intro">

      <div class="copy container">
        <div class="marquee">
          <!-- Here we add the title in multiple repeating times using javascript -->
          <span>Event -- January 1-2, 2020, Zoom</span>
        </div>
      </div>

    </section>