White pixel line appearing at the edge of images - html

Question

JsFiddle
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;
}
}
<div class="iconsbg_container">
<div class="icons_container">
<div class="EG_icons_a">
<div class="EG_icons_b"></div>
<div class="EG_icons_c"></div>
</div>
</div>
</div>
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.
I don't get the line at all on IE or Firefox.
Currently I am using Chrome 64.0.3282.186 on my desktop, but I am also seeing it on mobile.
I feel like I am missing some obvious; any help appreciated.

Answer 1

This white 1px line is a part of your background-image which is inserted second time, because there is some small mistake in browser about calculate background-image width. To avoid that you must add one line to your css. For .EG_icons_a, .EG_icons_b, .EG_icons_c add background-repeat: no-repeat; - it will help.