Marquee Words/Scrolling text not showing on iphone

Issue

I am unable to debug on iphones, was hoping someone would be able to point me to the problem.

I got the below code which shows marquee text - scrolling text. Works fine on all platforms except iphones. Any idea what's causing the issue?

On iphones it seems to be empty, but then all of a sudden itll show really fast scrolling text, then nothing again

.marquee {
  margin: auto;
  margin-top: auto;
  padding-bottom: 32px;
  margin-top: 55px;
}

.marquee-wrapper {
  position: relative;
  overflow: hidden;
  height: 40px;
  display: flex;
  justify-content: center;
}

.marquee-words {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
}

.marquee-words span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee-keywords 30s linear infinite;
  -webkit-animation: marquee-keywords 30s linear infinite;
  font-size: 20px;
  letter-spacing: 0.2em;
  animation-delay: -14s;
  -webkit-animation-delay: -14s;
}

.marquee-double span {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

@keyframes marquee-keywords {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

@-webkit-keyframes marquee-keywords {
  0% {
    -webkit-transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-100%, 0);
  }
}

<div class="marquee">
  <div class="marquee-wrapper">
   <p class="marquee-words">
    <span>One example and in front of the room, One example and in front of the room</span>
  </p>
  <p class="marquee-words marquee-double">
    <span>One example and in front of the room, One example and in front of the room</span>
  </p>
  </div>
</div>

Solution

I did not pin down exactly why IOS might be getting confused, but it may be some combination of flex and animation delays because if all this stripped away the problem disappears.

As you already have two copies of the complete text, this snippet simply puts them altogether in one element and animates that element but moving it just 50% of its width then starting again.

That way the start of the text goes directly into the position of the start of the second copy so the changeover is visually seamless.

.container {
  overflow: hidden;
}

.marquee {
  margin: 0;
  padding-bottom: 32px;
  margin-top: 55px;
  display: inline-block;
}

.marquee-words {
  white-space: nowrap;
  animation: marquee-keywords 15s linear infinite;
  font-size: 20px;
  letter-spacing: 0.2em;
}

@keyframes marquee-keywords {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

<div class="container">
  <div class="marquee">
    <div class="marquee-words">One example and in front of the room, One example and in front of the room, One example and in front of the room, One example and in front of the room,&nbsp;</div>
  </div>
</div>

Note: although the text is styled not to wrap it seems that a trailing space causes a slight mis-alignment of the text (a very slight jerkiness) when it is repeating at 50%. The final trailing space is replaced with a non breaking space in the snippet so that this space does not get ignored.

Answered By - A Haworth