title: Firefox has strange border/rendering artifacts with adjacent background-images
body: <p><a href="http://jsbin.com/liqeh/1/" rel="nofollow">See this bin.</a> </p>
  
  <p>In FF 28.0 I'm seeing a thin black border between the images. </p>
  
  <p>I'm also seeing animation artifacts on hover. Some of the borders skip frames, while others end on a weird color value that doesn't match the image itself. </p>
  
  <p>Resize your browser window a bit and you should see the artifacts.</p>
  
  <p>Webkit renders fine.</p>
  
  <p>Hardware is MacBook Air running 10.9.2, 1.3 Ghz i5. Graphics are Intel HD Graphics 5000 1024 MB.</p>
  
  <p>Here's the relevant code.</p>
  
  <p><strong>HTML</strong>
  </p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="column"&gt;
              &lt;div class="bg-img gray" style="background-image: url('http://placekitten.com/g/200/300');"&gt;&lt;/div&gt;
              &lt;div class="bg-img color" style="background-image: url('http://placekitten.com/200/300');"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="column"&gt;
              &lt;div class="bg-img gray" style="background-image: url('http://placekitten.com/g/200/300');"&gt;&lt;/div&gt;
              &lt;div class="bg-img color" style="background-image: url('http://placekitten.com/200/300');"&gt;&lt;/div&gt;
          &lt;/div&gt;
          ...
          &lt;!-- two more .columns. four per row ---&gt;
      &lt;/div&gt; &lt;!-- .row --&gt;
      ...
      &lt;!-- another .row --&gt;
  &lt;/div&gt; &lt;!-- .container --&gt;
  </code></pre>
  
  <p><strong>CSS</strong>
  </p>
  
  <pre><code>html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  
  .container {
    width: 100%;
    margin: 0 auto;
    height: 100%;
  }
  
  .row {
    width: 100%;
    height: 50%;
    overflow: auto;
  }
  
  .column {
    width: 25%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
  }
  
  .column:hover .color {
    opacity: 1;
  }
  
  .color, .gray {
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      background-attachment: local;
  }
  
  .color {
    position: absolute;
    top: 0px;
    left: 0px;
    transition: opacity 500ms ease 0s;
    opacity: 0;
  }
  </code></pre>