title: White pixel line appearing at the edge of images
body: <p><a href="https://jsfiddle.net/tm7bsLtp/4/" rel="nofollow noreferrer">JsFiddle</a><br>
  <code>Code:</code>
  <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>.iconsbg_container {
    width: 100%;
    -webkit-animation: iconsbg_container 10s linear infinite;
    -moz-animation: iconsbg_container 10s linear infinite;
    -ms-animation: iconsbg_container 10s linear infinite;
    animation: iconsbg_container 10s linear infinite;
  }
  
  .EG_icons_a,
  .EG_icons_b,
  .EG_icons_c,
  .iconsbg_container {
    overflow: hidden;
  }
  
  .icons_container {
    padding: 50px 0;
    width: 50%;
    max-width: 900px;
    position: relative;
    margin: 0 auto;
  }
  
  .EG_icons_a,
  .EG_icons_b,
  .EG_icons_c {
    background-image: url('http://davidwillprice.com/wp-content/uploads/2018/03/Icons-sprite-sheet2.png');
    background-size: auto 100%;
    width: 100%;
  }
  
  .EG_icons_b,
  .EG_icons_c {
    height: 100%;
    position: absolute;
  }
  
  .EG_icons_a {
    position: relative;
    margin: 0 auto;
    padding-bottom: 75%;
  }
  
  .EG_icons_b {
    -webkit-animation: EG_icons_b 10s linear infinite;
    -moz-animation: EG_icons_b 10s linear infinite;
    -ms-animation: EG_icons_b 10s linear infinite;
    animation: EG_icons_b 10s linear infinite;
    background-position: 50% 50%;
  }
  
  .EG_icons_c {
    -webkit-animation: EG_icons_c 10s linear infinite;
    -moz-animation: EG_icons_c 10s linear infinite;
    -ms-animation: EG_icons_c 10s linear infinite;
    animation: EG_icons_c 10s linear infinite;
    background-position: 100% 100%;
  }
  
  
  /*20 13 20 13 20 13  */
  
  
  /*20 33 53 66 86 100  */
  
  @-webkit-keyframes EG_icons_b {
    0%,
    20% {
      opacity: 0;
    }
    33%,
    53% {
      opacity: 1;
    }
    66%,
    100% {
      opacity: 0;
    }
  }
  
  @-moz-keyframes EG_icons_b {
    0%,
    20% {
      opacity: 0;
    }
    33%,
    53% {
      opacity: 1;
    }
    66%,
    100% {
      opacity: 0;
    }
  }
  
  @-ms-keyframes EG_icons_b {
    0%,
    20% {
      opacity: 0;
    }
    33%,
    53% {
      opacity: 1;
    }
    66%,
    100% {
      opacity: 0;
    }
  }
  
  @keyframes EG_icons_b {
    0%,
    20% {
      opacity: 0;
    }
    33%,
    53% {
      opacity: 1;
    }
    66%,
    100% {
      opacity: 0;
    }
  }
  
  @-webkit-keyframes EG_icons_c {
    0%,
    53% {
      opacity: 0;
    }
    66%,
    86% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  @-moz-keyframes EG_icons_c {
    0%,
    53% {
      opacity: 0;
    }
    66%,
    86% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  @-ms-keyframes EG_icons_c {
    0%,
    53% {
      opacity: 0;
    }
    66%,
    86% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  @keyframes EG_icons_c {
    0%,
    53% {
      opacity: 0;
    }
    66%,
    86% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  @-webkit-keyframes iconsbg_container {
    0%,
    53% {
      background-color: #ffffff;
    }
    66%,
    86% {
      background-color: #48616e;
    }
    100% {
      background-color: #ffffff;
    }
  }
  
  @-moz-keyframes iconsbg_container {
    0%,
    53% {
      background-color: #ffffff;
    }
    66%,
    86% {
      background-color: #48616e;
    }
    100% {
      background-color: #ffffff;
    }
  }
  
  @-ms-keyframes iconsbg_container {
    0%,
    53% {
      background-color: #ffffff;
    }
    66%,
    86% {
      background-color: #48616e;
    }
    100% {
      background-color: #ffffff;
    }
  }
  
  @keyframes iconsbg_container {
    0%,
    53% {
      background-color: #ffffff;
    }
    66%,
    86% {
      background-color: #48616e;
    }
    100% {
      background-color: #ffffff;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="iconsbg_container"&gt;
    &lt;div class="icons_container"&gt;
      &lt;div class="EG_icons_a"&gt;
        &lt;div class="EG_icons_b"&gt;&lt;/div&gt;
        &lt;div class="EG_icons_c"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've made a basic CSS slideshow, but I am getting a white pixel line on the right of the images when using Chrome at some resolutions.</p>
  
  <p>I don't get the line at all on IE or Firefox.</p>
  
  <p>Currently I am using Chrome 64.0.3282.186 on my desktop, but I am also seeing it on mobile.</p>
  
  <p><img src="https://i.imgur.com/mAXEHmY.png" alt="https://i.imgur.com/mAXEHmY.png"></p>
  
  <p>I feel like I am missing some obvious; any help appreciated.</p>