CODEWITHSUNDEEP
htmlcss
Troas
Troas

Reputation: 3

White pixel line appearing at the edge of images

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.

https://i.sstatic.net/3sHPO.png

I feel like I am missing some obvious; any help appreciated.

Upvotes: 0

Views: 96

Answers (1)

Joint
Joint

Reputation: 1218

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.

Upvotes: 1

Related Questions