title: repeating-linear-gradient spacing becomes out-of-sync
body: <p>I'm attempting to use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient" rel="nofollow"><code>repeating-linear-gradient</code></a> to zebra-stripe a code block. To that end, I specified an explicit <code>line-height</code> in the code block and alternated the color at intervals of that value.</p>
  
  <p>It works great for a few lines, but the text and stripes eventually stop lining up. Does anyone know why this is and whether it can be fixed?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>pre {
    font-family: monospace;
    font-size: 12px;
    line-height: 1.4em;
    background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 1.4em,
    #ddd 1.4em,
    #ddd 2.8em);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;pre&gt;Here
  I
  will
  write
  many
  lines
  of
  text
  and
  the
  spacing
  starts
  out
  quite
  well
  but
  eventually
  the
  lines
  and
  stripes
  get
  messed
  up
  and
  this
  makes
  me
  sad.&lt;/pre&gt;</code></pre>
  </div>
  </div>
  </p>