Margin between the images in the sprite generated

[Jean-Philippe Bergeron]

If we look at the
real-world-example\tabs-sprite.html
And we zoom in the page using the browser built in zoom, artifacts
begins to appear at the edge of the images, because it tries to do an
interpolation with the adjacent pixel which comes from a totally
different image.

I would like to request the feature which would give a margin of 1
pixel around every images in the sprite, so the interpolation in the
browser would be made with a background pixel.

[Stanislaw Osinski]

Hi Jean-Philippe,

> If we look at the
> real-world-example\tabs-sprite.html
> And we zoom in the page using the browser built in zoom, artifacts
> begins to appear at the edge of the images, because it tries to do an
> interpolation with the adjacent pixel which comes from a totally
> different image.

Good point!

> I would like to request the feature which would give a margin of 1
> pixel around every images in the sprite, so the interpolation in the
> browser would be made with a background pixel.

In fact, there already is a feature request for this:
http://issues.carrot2.org/browse/SMARTSPRITES-57

Until it gets implemented, a bit of a tedious workaround would be to
add the appropriate sprite-margin-* directives to the affected sprite
images.

Cheers,

S.

[Jean-Philippe Bergeron]

Hi, thanks for that quick answer

I did add the command to my block
sprite-margin-top: 1px;

My code is
.score {
width: 51px;
height: 59px;
background-repeat: no-repeat;
background-image: url(images/Score.png); /** sprite-ref: score;
sprite-margin-top: 1px; */
}

I see one more pixel in top of the image in the resulting score.png,
but the artifact is still there one pixel higher. I would like to be
able to move the background one pixel higher.
In the resulting css, I see "background-position: left -96px;" and I
would like to have background-position: left -97px;

I would appreciate to have a solution other than modifying the
resulting css.

Thanks

On Jul 18, 2:10 pm, Stanislaw Osinski <stac...@gmail.com> wrote:
> HiJean-Philippe,

[Stanislaw Osinski]

Hi,

I did add the command to my block
sprite-margin-top: 1px;

My code is
.score {
   width: 51px;
   height: 59px;
   background-repeat: no-repeat;
   background-image: url(images/Score.png); /** sprite-ref: score;
sprite-margin-top: 1px; */
}

I see one more pixel in top of the image in the resulting score.png,
but the artifact is still there one pixel higher. I would like to be
able to move the background one pixel higher.
In the resulting css, I see "background-position: left -96px;" and I
would like to have background-position: left -97px;

You're right, that's not a solution to the problem. I've added a separate issue to cover this:

http://issues.carrot2.org/browse/SMARTSPRITES-70

Meanwhile, another workaround that springs to my mind is adding a bottom margin to the _preceding_ image in the sprite. It shouldn't affect the display of the element showing the preceding image's content (otherwise, the whole idea of sprites wouldn't make sense), but it should decrease the impact of the interpolation.

Cheers,

S.

[Jean-Philippe Bergeron]

Thanks for the support.
Adding sprite-margin-bottom: 1px; does solve the problem without much
modifications.

When that issue will be fixed, I will be glad to use that option.

Thanks

On Jul 18, 2:44 pm, Stanislaw Osinski