时间戳

首页 > 解决方案 > 文字未在 ios 上显示，但在 Android 和桌面上显示

android - 文字未在 ios 上显示，但在 Android 和桌面上显示

问题描述

我注意到，当我从 Safari 和 Chrome 在 Ios 设备上访问它但在 Android 设备和桌面上显示时，我的页面上没有显示某些内容。

除了下面的动画名称之外，所有 JS 和 CSS 都工作得很好，因为我不知道在哪里寻找这个错误。

Name Name链接到 CSS 的页面工作正常，因为当我更改它时，还有其他工作正常 ecen正常反映。请注意，Javascript 是在 Ios 设置中激活的

这是html：

            <div class="animated">
                Hey, I'm<br>
                <span class="color-primary mt-5" id="animated-name" style="margin-top: 20px;"></span>
            </div>

这是CSS：

.animated {
  font-size: 40px;
  color: #d1d8e0;
  margin-top: 20px;
  font-weight: 900;
  height: 60px;
  line-height: 50px;
}
.animated span:before {
  content: "";
  animation: animate infinite 8s;
  opacity: 0;
  transition: opacity 0.3s;
}
@media (max-width: 800px) {
  .animated {
    height: 70px;
    font-size: 25px;
  }
}
@keyframes animate {
  30% {
    content: "Name Name";
    opacity: 1;
  }
  /* ScrolDown
  45% {
    opacity: 0;
  }
*/
  65% {
    content: "Text Text\A Text & Text";
    white-space:pre;
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
/*
  80% {
    content: "";
    opacity: 1;
  }*/
}

标签： androidhtmlcssios

解决方案

MDN 表示Safari 浏览器不支持伪元素的动画和过渡。

我尝试从父元素继承动画和过渡到伪元素，但它也不起作用。

所以我放弃了所有的伪元素并使用了 Javascript。

const spans = document.querySelectorAll("span");
const animation = function () {
  for (let span of spans) span.classList.toggle("fade");
};
setInterval(animation, 2400);
.animated {
  font-size: 40px;
  color: #d1d8e0;
  margin-top: 20px;
  font-weight: 900;
  height: 60px;
  line-height: 50px;
}

.animated span {
  position: absolute;
  opacity: 1;
  transition: all 0.5s;
}

.animated>.fade {
  opacity: 0;
}

@media (max-width: 800px) {
  .animated {
    height: 70px;
    font-size: 25px;
  }
}
<div class="animated">
  Hey, I'm<br>
  <span class="color-primary mt-5 fade" id="animated-name" style="margin-top: 20px;">Name Name</span>
  <span class="color-primary mt-5" id="animated-text" style="margin-top: 20px;">Text Text <br> Text & Text</span>
</div>

推荐阅读