Image sprite not lined up correctly on Chrome

HTML-CSS
1

How come Chrome isn’t lined up correctly, but firefox is, and how would that be fixed?

And it’s only these two images it’s happening to.

If the background positions are set up correctly for each image, and they all work fine in firefox, how come Chrome isn’t producing the same result?

And how would this be fixed?

https://jsfiddle.net/ksp4qoej/1/

Chrome:

Firefox:

.jacketb,
.jacketc,
.jacketd,
.wrapb,
.wrapb::before,
.wrapd .img,
.wrape,
.wraph,
.wrapf {
    background-image: url("https://i.imgur.com/Y0CrMX2.png");
    background-repeat: no-repeat;
}

1st Image:

.jacketb,
.wrape {
  background-position: -600px -520px;
}

2nd Image:

.wrapf {
  position: relative;
  width: 266px;
  height: 251px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  background-color: #000000;
  background-position: -866px -616px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}
2

Not sure why, but it seems to be caused by background-repeat: no-repeat;

1 Like
3

Now the question is, how would it be fixed without removing:
background-repeat: no-repeat;

4

This fixes it for me.

background-clip: content-box;

1 Like
5

background-size: cover; is important