Text not showing on ios but showing on Android and Desktop

Question

I have notice that there is something not showing on my page when I access it on Ios devices from both Safari and Chrome but showing on Android Devices and desktop.

All the JS and CSS are working perfectly fine except for the below Anitmated Name which is confusing because I don't know where to look for this error.

The page linked to CSS is working fine because there are other this working fine ecen when i change Name Name it is reflected normally. Note that Javascript is activated in Ios settings

Here is the html:

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

here is the 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;
  }*/
}

score 1 · Accepted Answer · answered Oct 29 '21 at 21:12

MDN says animations and transitions are not supported on Safari browsers for pseudo elements.

I tried inheriting animations and transitions from parent element to pseudo elements, but it didn't work either.

So i ditched all pseudo elements and used 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>

score 0 · Answer 2 · answered Oct 24 '21 at 15:02

Seems to be working great on a phone.

.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;
  }*/
}

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

score 0 · Answer 3 · answered Oct 26 '21 at 08:40

Try to prefix your @keyframes with -webkit-, and include -webkit-prefixed animations and transitions there as well. You can read more about webkit here

Also according to this article though the support in 2015 was pretty bad. Now this is an old article so the support has improved quite a lot (so it now works on Android and desktop). But, if adding the prefixes is not working than it might just be that iOS is not supporting the content property inside animations (I couldn't find the exact support for the combination of animations with content property)

Text not showing on ios but showing on Android and Desktop

3 Answers3