Sprites are getting a border

rmevans1 commented 8 years ago

When I generate the sprite sheet I am getting a border around the image

twolfson commented 8 years ago

Can you provide an example of what you are seeing?

twolfson commented 8 years ago

Closing due to 1 month of inactivity

gregory-h commented 8 years ago

Seeing this as well when using img tag; one on the left is img with sprite class; right is img with src.

The generated css has the correct width and height and the generated .png sprites file doesn't show any border.

.icon-google-drive-transparent { background-image: url(../img/sprites.png); background-position: -919px -133px; width: 30px; height: 24px; }

twolfson commented 8 years ago

Can you upload a gist with example HTML and the generated CSS (preferably only the sprite CSS) so we can reproduce the issue?

ghost commented 8 years ago

I am getting the same issue @rmevans1 @oneHappyCanuck any luck fixing this?

twolfson commented 8 years ago

@ikosen Can you provide examples of what you are seeing?

ghost commented 8 years ago

screen shot 2016-03-17 at 6 26 33 pm emrspritesheet

code:

sprite:{
            all: {
                src: "path/*.png",
                dest: "path/spritesheet.png",
                destCss: "path/css/sprites.css",
                imgPath: "../assets/img/spritesheet.png"
            }
        }

The first image is a screenshot of what I am seeing. The second one is the sprite image

.icon-banana_PNG842 {
  background-image: url(../assets/img/spritesheet.png);
  background-position: -700px 0px;
  width: 512px;
  height: 512px;
}

twolfson commented 8 years ago

Can you upload the HTML/CSS of the page that's being used on?

ghost commented 8 years ago

The css is really huge and in one file. 17,000 lines. I have removed all the css apart from the one above and this is what I get screen shot 2016-03-17 at 7 15 15 pm

twolfson commented 8 years ago

Hmm, maybe it's default CSS in Safari. What does it look like in other browsers?

ghost commented 8 years ago

it looks the same on Chrome. screen shot 2016-03-17 at 7 21 59 pm

ghost commented 8 years ago

The weird thing is that when I add a border it goes around that one. screen shot 2016-03-17 at 7 26 53 pm

twolfson commented 8 years ago

What's the HTML you are using for the image?

ghost commented 8 years ago


<!DOCTYPE html>

<html>

    <head>
        <title>Smiling Banana</title>
        <style>

            .icon-Mushroom2 {
              background-image: url(spritesheet.png);
              background-position: 0px 0px;
              width: 700px;
              height: 700px;
            }
            .icon-banana_PNG842 {
              background-image: url(spritesheet.png);
              background-position: -700px 0px;
              width: 512px;
              height: 512px;
            }
            .icon-blue_guy {
              background-image: url(spritesheet.png);
              background-position: 0px -700px;
              width: 500px;
              height: 500px;
            }

        </style>
    </head>

    <body>
        <img class="icon-banana_PNG842">
    </body>

</html>

twolfson commented 8 years ago

Alright, I have reproduced the error. I tried to remedy it with border: 0 and normalize.css but neither worked.

https://gist.github.com/twolfson/eb4dec3e04ba7bcc006a

The border seems to appear only on img tags in Chrome. In Firefox, it's fine in all scenarios. In Chrome, if we do a div with display: inline-block, then it only shows the border on the img.

I think the ideal solution is to remove documentation for <img> so people stop using it. If they need display: inline-block, then they can roll their own solution (e.g. .icon class, [class^=icon-] selector).

ghost commented 8 years ago

Thank you. I'll stick to divs myself for the time being. If I can help in anyway let me. I'll be happy to assist

twolfson commented 8 years ago

This has been resolved in spritesheet-templates@10.1.1, grunt-spritesmith@6.3.1, and gulp.spritesmith@6.2.1. Thanks again for the bug report =)

kibs21k commented 8 years ago

Hi there, I still have the exactly same problem with border when using img tag and my version is gulp.spritesmith@6.2.1 screen shot 2016-06-24 at 4 03 17 pm

You can check my setup and everything about the project here: https://github.com/lb021/green-unity

ghost commented 8 years ago

@lb021 try using <div class="icon-luke></div> instead of the img tag

kibs21k commented 8 years ago

Yeah I did, also need to add property display: inline-block Was just referring to @twolfson because he said the bug is fixed in this version, maybe he overlooked something here :)

ghost commented 8 years ago

@lb021 my bad. 😄

twolfson commented 8 years ago

It's not specifically a spritesmith problem, more of documentation in the generated CSS. We did update the documentation in spritesheet-templates@10.1.1 to no longer mention using the img tag:

https://github.com/twolfson/spritesheet-templates/blob/10.1.4/lib/templates/scss.template.handlebars#L47-L72

twolfson / grunt-spritesmith

Sprites are getting a border #153