title: CSS marquee text animation not displaying properly on mobile devices
body: <p>I'm having trouble getting my marquee text to display correctly on mobile devices. It basically cuts off the text and you see only part of it moving across the screen. I think it has to do with the overflow, but if i have overflow-y or visible, then it makes the width of the web page on mobile device wider than the web page itself, and the user can scroll y. If i need to make a codepen i can, the code snippet displays correctly unless you view the code on a mobile device.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-75%);
    }
  }
  
  @keyframes marquee-r {
    from {
      transform: translateX(-75%);
    }
    to {
      transform: translateX(0);
    }
  }
  
  .marquee {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 10em;
    overflow: hidden;
  }
  
  @media screen and (max-width: 768px) {
    .marquee {
      height: 6em;
    }
  }
  
  .track {
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 30s linear infinite;
  }
  
  .marquee-text {
    font-size: 10em;
    color: #3395F7;
    text-transform: uppercase;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #3395F7;
  }
  
  @media screen and (max-width: 768px) {
    .marquee-text {
      font-size: 6em;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="marquee"&gt;
    &lt;div class="track"&gt;
      &lt;div class="marquee-text"&gt;&amp;nbsp;Test1 &amp;#8226; Test2 &amp;#8226; Test3 &amp;#8226; Test4 &amp;#8226; Test5 &amp;#8226;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>