title: Why is my CSS scrolling animation not working when background-size is set to 100%?
body: <p>I am trying to achieve a CSS animation which scrolls a repeating background image infinitely. To make the scrolling as smooth as possible, I want the animation to cycle at a point when the image is in the exact same position it was when it started. And in order to make the animation look good regardless of any particular user's viewport size, I will be using an SVG graphic and I would like the <code>background-size</code> property to be set to <code>100%</code> or the <code>cover</code> keyword.</p>
  
  <p>My specified parameters do not work as expected. However, any other <code>background-size</code> value I choose does.</p>
  
  <p><strong>Why does my scrolling animation not work when <code>background-size</code> is <code>100%</code>?</strong></p>
  
  <p>For a working example, see <a href="http://codepen.io/anon/pen/jWYeOX?editors=110" rel="nofollow">this code pen</a> or use the following code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="element"&gt;
    &lt;h1&gt;Scroll endlessly I say!&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>@keyframes scroll {
    0%   { background-position:   0% center; }
    100% { background-position: 100% center; }
  }
  
  #element{
    padding:     10px;
    color:       white;
    background:  black;
    text-shadow: 0 0 4px black;
  
    animation:         scroll 8s linear infinite;
    background-image:  url("https://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg");
    background-repeat: repeat;
  
    /* Works: 
    ========================= */
    background-size:  50%;
    /*background-size:  20%;*/
    /*background-size:  200%;*/
    /*background-size:  100px;*/
    /*background-size:  10rem;*/
  
    /* Does NOT work:
    ========================= */
    /*background-size:  100%;*/
  }
  </code></pre>
  
  <p>Although I could use another solution like <a href="https://css-tricks.com/infinite-all-css-scrolling-slideshow/" rel="nofollow">this one by CSS-Tricks</a>, I like mine better because it is more efficient, since I do not have use a large, redundant graphic.</p>