Text not showing on ios but showing on Android and Desktop

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

from Text not showing on ios but showing on Android and Desktop