Html 使用CSS动画构建的文本滑块未在手机上显示

我正在开发我的第一个公文包网站，希望在主页上添加一个文本滑块，可以循环浏览列表

公布的草案如下：

在桌面上，列表循环通过fine。当我使用ChromeDevTools检查并将屏幕大小更改为mobile时，列表循环良好。但是，当我在实际的手机或平板电脑上加载页面时，而不是使用带有devtools的响应大小调整，文本的滑块部分就会消失。我不明白为什么

我想可能是元素需要定义高度，或者我的一些动画不受支持。但我现在用的手机是iphonexs和最新的iPad

HTML和CSS：

<div class="container-banner-text">
        <span class="banner-text">Hi, I'm Ryan and I 
          <br>
          <div class="content-slider">
              <div class="slider">
                <div class="mask">
                  <ul>
                    <li class="anim1">
                      <div class="quote">am a jr web dev.</div>
                    </li>
                    <li class="anim2">
                      <div class="quote">love learning.</div>
                    </li>
                    <li class="anim3">
                      <div class="quote">love organization.</div>
                    </li>
                    <li class="anim4">
                      <div class="quote">love beautiful design.</div>
                    </li>
                    <li class="anim5">
                      <div class="quote">love efficiency.</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
        </span>
      </div>

.container-banner-text {
  position: absolute;
  top:40%; 
  text-align: center;
  width:100%;
}

.banner-text {
  color: rgba(var(--white), 1);
  font-family: Roboto, sans-serif ;
  font-size: 2.5rem;
  font-weight: 400;
  margin:auto;
}

/* text carousel */

.slider {
  text-align: center;
  margin: 0 auto;
  position: relative;
}

.mask {
  overflow: hidden;
  height: 45vh;
}

.slider ul {
  margin: 0;
  padding: 0;
  position: relative;
}

.slider li {
  position: absolute;
  list-style: none;
  margin:auto;
  text-align:center;
  width:100%;
  background: rgba(var(--white), 1);
  background: -webkit-linear-gradient(right, rgba(var(--red),1), rgba(var(--orange),1),rgba(var(--gold),1)); 
  background-clip: border-box;
  background-clip: text ;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.slider li.anim1 {
  animation: cycle 15s linear infinite;
}

.slider li.anim2 {
  animation: cycle2 15s linear infinite;
}

.slider li.anim3 {
  animation: cycle3 15s linear infinite;
}

.slider li.anim4 {
  animation: cycle4 15s linear infinite;
}

.slider li.anim5 {
  animation: cycle5 15s linear infinite;
}

.slider:hover li {
  animation-play-state: paused;
}

@keyframes cycle {
  0% {
    top: 0px;
  }
  4% {
    top: 0px;
  }
  16% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  20% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  50% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  92% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
  96% {
    top: -325px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}

@keyframes cycle2 {
  0% {
    top: -325px;
    opacity: 0;
  }
  16% {
    top: -325px;
    opacity: 0;
  }
  20% {
    top: 0px;
    opacity: 1;
  }
  24% {
    top: 0px;
    opacity: 1;
  }
  36% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  40% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle3 {
  0% {
    top: -325px;
    opacity: 0;
  }
  36% {
    top: -325px;
    opacity: 0;
  }
  40% {
    top: 0px;
    opacity: 1;
  }
  44% {
    top: 0px;
    opacity: 1;
  }
  56% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  60% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  61% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle4 {
  0% {
    top: -325px;
    opacity: 0;
  }
  56% {
    top: -325px;
    opacity: 0;
  }
  60% {
    top: 0px;
    opacity: 1;
  }
  64% {
    top: 0px;
    opacity: 1;
  }
  76% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  80% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  81% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle5 {
  0% {
    top: -325px;
    opacity: 0;
  }
  76% {
    top: -325px;
    opacity: 0;
  }
  80% {
    top: 0px;
    opacity: 1;
  }
  84% {
    top: 0px;
    opacity: 1;
  }
  96% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
}

嗨，我是Ryan，我是




我是jr网络开发人员。


热爱学习。


爱组织。


喜欢漂亮的设计。


爱效率。


.容器标题文本{
位置：绝对位置；
最高：40%；
文本对齐：居中；
宽度：100%；
}
.横幅文本{
颜色：rgba（var（--白色），1）；
字体系列：Roboto，无衬线；
字体大小：2.5rem；
字体大小：400；
保证金：自动；
}
/*文本传送带*/
.滑块{
文本对齐：居中；
保证金：0自动；
位置：相对位置；
}
.面具{
溢出：隐藏；
高度：45vh；
}
.ul{
保证金：0；
填充：0；
位置：相对位置；
}
李先生{
位置：绝对位置；
列表样式：无；
保证金：自动；
文本对齐：居中；
宽度：100%；
背景：rgba（var（--白色），1；
背景：-webkit线性梯度（右图，rgba（var（--红色），1），rgba（var（--橙色），1），rgba（var（--金色），1））；
背景剪辑：边框框；
背景剪辑：文本；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
.li.1{
动画：循环15秒线性无限；
}
.2{
动画：循环15s线性无限；
}
.li.3{
动画：循环3 15秒线性无限；
}
.li.4{
动画：循环4 15秒线性无限；
}
.5{
动画：循环15秒线性无限；
}
.滑块：鼠标悬停{
动画播放状态：暂停；
}
@关键帧循环{
0% {
顶部：0px；
}
4% {
顶部：0px；
}
16% {
顶部：0px；
不透明度：1；
z指数：0；
}
20% {
顶部：325px；
不透明度：0；
z指数：0；
}
21% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
50% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
92% {
顶部：-325px；
不透明度：0；
z指数：0；
}
96% {
顶部：-325px；
不透明度：0；
}
100% {
顶部：0px；
不透明度：1；
}
}
@关键帧循环2{
0% {
顶部：-325px；
不透明度：0；
}
16% {
顶部：-325px；
不透明度：0；
}
20% {
顶部：0px；
不透明度：1；
}
24% {
顶部：0px；
不透明度：1；
}
36% {
顶部：0px；
不透明度：1；
z指数：0；
}
40% {
顶部：325px；
不透明度：0；
z指数：0；
}
41% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
100% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
}
@关键帧循环3{
0% {
顶部：-325px；
不透明度：0；
}
36% {
顶部：-325px；
不透明度：0；
}
40% {
顶部：0px；
不透明度：1；
}
44% {
顶部：0px；
不透明度：1；
}
56% {
顶部：0px；
不透明度：1；
z指数：0；
}
60% {
顶部：325px；
不透明度：0；
z指数：0；
}
61% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
100% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
}
@关键帧循环4{
0% {
顶部：-325px；
不透明度：0；
}
56% {
顶部：-325px；
不透明度：0；
}
60% {
顶部：0px；
不透明度：1；
}
64% {
顶部：0px；
不透明度：1；
}
76% {
顶部：0px；
不透明度：1；
z指数：0；
}
80% {
顶部：325px；
不透明度：0；
z指数：0；
}
81% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
100% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
}
@关键帧循环5{
0% {
顶部：-325px；
不透明度：0；
}
76% {
顶部：-325px；
不透明度：0；
}
80% {
顶部：0px；
不透明度：1；
}
84% {
顶部：0px；
不透明度：1；
}
96% {
顶部：0px；
不透明度：1；
z指数：0；
}
100% {
顶部：325px；
不透明度：0；
z指数：0；
}
}

查看代码我注意到在某些情况下会显示：滑块上没有添加任何内容

感谢@ion查看此内容。该站点构建在一个页面上，使用javascript在节之间切换，并使用函数将节从display:none更改为display:inline flex。因此，我认为这就是你们所看到的，它正在按预期工作。此外，我还可以在笔记本电脑的所有屏幕尺寸上看到滑块文本。只是不是在用我的手机的时候。所以我认为这与我的手机如何呈现网站和我的笔记本电脑有关。事实证明，问题是我在不需要的时候将滑块文本包装在div中。我删除了div，只使用了

上的样式，现在它是可见的。有趣的是，这个问题只影响苹果的移动设备（iphone和iPad），而不影响android或台式机