Setting up image sprites using 1 url in the CSS


#21

Wouldn’t it be happening to all the images then, and not just 2 of them?

Why would it only happen to 2 of them out of 8?

Wouldn’t it happen to all of them?


#22

If I could reproduce the error I’m sure I could enlighten you why. But in my Chromium (Chrome) there is no difference in image positions at all, or either in your other two JSFiddle versions. :slight_smile:

Your screenshots would have helped more if you also included the adjacent correct positioned images, for clarity and to see e.g. the error distance.

Now I can’t be sure the difference still is. Or if this was a consistent error or if I have to provoke it somehow to show. So I can’t suggest anything, sorry. :slight_smile:


#23

Ok, I’ll do it for you :slight_smile:

I think you just need to add background-clip:padding-box to fix it.

You really need to start remembering things you’ve been told or write them down in a book so you can look them up when needed.


#24

Should I be removing no-repeat from the code then, or no?

I’m not supposed to be using this?
background-repeat: no-repeat;

Doesn’t work in Chrome.
https://jsfiddle.net/ksp4qoej/19/

    background-image: url("https://i.imgur.com/Y0CrMX2.png");
    background-repeat: no-repeat;
}

Works in Chrome
https://jsfiddle.net/ksp4qoej/20/

    background-image: url("https://i.imgur.com/Y0CrMX2.png");
}

#25

Are the images repeated?

No they are not repeated so you don’t need them repeated. The default is to repeat them which means if you get your dimensions wrong then the image gets repeated and you will see it again.

However the background-repeat:repeat seems to be triggering the border-radius bug already mentioned so I would just add the background-clip:padding-box to the rule.

e.g.

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

#26

So then, trimming the image, making it larger or smaller, would not have made a difference then in this case?

If I wasn’t using this?

background-clip:padding-box;


Because in this code I fixed it by trimming the image:
It went from:

606 x 606

to:

600 x 600


#27

You don’t want to keep trimming your images so you need to find an html css solution instead.

Hopefully the padding-box fix will keep things consistent.

The problem with bugs is that they are bugs.

When I make sprites I always space them at least 2px away from each other and and I make the sprites 2px bigger than needed so that I have 1px leeway on either edge. Otherwise when a user zooms the page you get a 1px rounding error and if the sprites are next to each other the next sprite will show at the edge. Some browsers are better than others at handling the rounding but at some point a pixel may added or subtracted.


#28

How come in this code, when a sprite is used on only 2 images.

There’s no spacing issue in Chrome?
https://jsfiddle.net/g6oaht8f/318/

image


.jacketb {
  position: relative;
  width: 266px;
  height: 174px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  background: #000000;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.jacketb,
.wrape {
  background: url("https://i.imgur.com/92kMrMf.jpg") no-repeat 0 0;
}

#29

Probably because its at position 0 0 but I would have to run tests to confirm.

I’m offline until tomorrow now so someone else can jump in and test :slight_smile:


#30

How would you have tested it?


#31

I would test it until it breaks or it fixes by testing out various combinations of background properties and border-radius.

It looks like the bug is triggered when the background-position horizontal position is less than -1px (i.e. -2px and above) and background-repeat is set to none and border-radius is also set. Looking around the web there seem to be similar bug reports for gradients and zooming images.

I’m also assuming that odd image sizes may have something to do with it as mentioned in the other thread but are not pertinent to this example…

Adding the background-clip:padding-box seems to fix it for all occasions.


#32

So, the reason why it worked on this one was because it’s at position 0 0?
#28

And when it’s at other positions, other weird stuff start happening where
background-clip:padding-box / would be needed.

Am I correct in all that I said there?

.jacketb,
.wrape {
  background: url("https://i.imgur.com/92kMrMf.jpg") no-repeat 0 0;
}

#33

Yes that’s basically correct not forgetting that it seems to be the border radius that is a consistent trigger also.

As usual with bugs they will present buggy behaviours :slight_smile:


#34

If I remove border-radius:25px from here:

Then it works in Chrome

Without:
background-clip:padding-box
https://jsfiddle.net/ksp4qoej/22/

.jacketb {
  position: relative;
  width: 266px;
  height: 174px;
  cursor: pointer;
  margin: 45px 0 0 0;
  background-color: #000000;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

background-clip:padding-box;

Would be needed for it to work with:
border-radius:25px


#35

Aside from that abnormality, how come Chrome seems to be more buggy than firefox lately?

Chrome, is Google, and Google is like one of the biggest companies in the world.


#36

Yes I told you it was one of the major triggers of this bug. There are a combination of factors involved. This is the nature of bugs.

All browsers have bugs. Firefox has it’s fair share of bugs as none are perfect.