Padding on retina sprite images

[petulla]

hi

I'm finding that the padding setting isn't working for retina sprites. Any advice?

[twolfson]

Can you provide an example?

[petulla]

Sure,

on the page, if I set padding on the sprite, I see:

This is odd. The sprite itself has padding:

How do I reconcile what I'm seeing on the page (a sprite with extra padding) vs. the sprite itself?

[twolfson]

Can you paste the gulp.src and configuration you are using?

[petulla]

 var spriteData =
    gulp.src(config.paths.src.assets + '/sprites/*.*') //
            .pipe(spritesmith({
              retinaSrcFilter: [config.paths.src.assets + '/sprites/*@2x.png'],
                padding:5,
                imgName: 'sprite.png',
                retinaImgName: 'sprite@2x.png',
                cssName: '_sprite.scss',
                cssFormat: 'scss_retina',
                algorithm: 'binary-tree'
            }));
    spriteData.img.pipe(gulp.dest(config.paths.build.style)); //
    spriteData.css.pipe(gulp.dest(config.paths.src.style + '/sass')); //

[petulla]

I find the on the page vs. the sprite behavior odd.. thoughts?

[twolfson]

Everything looks like it should work. From the fragmented screenshots of the spritesheets, it looks like the sprites were loaded out of order though. Any idea why that would be?

[petulla]

It appears as though the background is repeating..I.e., the padding doesn't extend to the edges.

[twolfson]

We only pad between sprites -- the edge padding wouldn't make sense as it's built to remove bleeding due to browser scaling (Ensighten/spritesmith#7)

https://github.com/Ensighten/spritesmith/blob/1.4.0/src/smith.js#L77-L82

https://github.com/Ensighten/spritesmith/blob/1.4.0/src/smith.js#L120-L126

[petulla]

I needed to add the padding manually to the retina mixin to solve the problem. I also needed to prevent background-repeat to eliminate the duplication issue.

[twolfson]

Not sure what you mean by that since we double padding for retina spritesheets =/

https://github.com/twolfson/gulp.spritesmith/blob/4.1.1/lib/gulp-spritesmith.js#L188

But in any case, I am glad your issue is resolved =)