Why is marquee text randomly showing blank on mobile?

htea 0
Viewed 20

I have a CSS animated marquee that looks great on desktop. However, on mobile it sometimes looks glitchy and randomly cuts off part of the content. This has happened me me a few times, especially when I've used span tags in the content to add different colours or cosmetic elements.

From my research, using "transform" shouldn't affect load speeds, so why is this happening? Do the span tags have anything to do with it? Is there just too much content loading?

Screenshot of Problem

URL: https://thisisjustatest13.myshopify.com/password?password=hello

The animation is created with:

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

Thank you!

marquee animation css html
1 Answers

I think we should to try to setting up the width of each elements to get an expected speed of marquee.

Here was the docs W3schools.in marquee

Taufik Romadhon0
Related