Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sprites are getting a border #153

Closed
rmevans1 opened this issue Dec 22, 2015 · 22 comments
Closed

Sprites are getting a border #153

rmevans1 opened this issue Dec 22, 2015 · 22 comments

Comments

@rmevans1
Copy link

When I generate the sprite sheet I am getting a border around the image
@twolfson
Copy link
Owner

Can you provide an example of what you are seeing?

@twolfson
Copy link
Owner

Closing due to 1 month of inactivity

@gregory-h
Copy link

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

image

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
Copy link
Owner

twolfson commented Mar 6, 2016

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

@ghost
Copy link

ghost commented Mar 17, 2016

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

@twolfson
Copy link
Owner

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

@ghost
Copy link

ghost commented Mar 17, 2016

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
Copy link
Owner

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

@ghost
Copy link

ghost commented Mar 17, 2016

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
Copy link
Owner

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

@ghost
Copy link

ghost commented Mar 17, 2016

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

@ghost
Copy link

ghost commented Mar 17, 2016

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
Copy link
Owner

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

@ghost
Copy link

ghost commented Mar 17, 2016 

<!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
Copy link
Owner

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).

@twolfson twolfson reopened this Mar 17, 2016
@ghost
Copy link

ghost commented Mar 17, 2016

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 added a commit to twolfson/spritesheet-templates that referenced this issue Mar 19, 2016
@twolfson
Corrected documentation to properly handle inline-block. Reference: t…
94fbe27 
…wolfson/grunt-spritesmith#153
@twolfson
Copy link
Owner

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
Copy link

kibs21k commented Jun 24, 2016 •
edited
Loading

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
screen shot 2016-06-24 at 4 03 39 pm

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

@ghost
Copy link

ghost commented Jun 24, 2016

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

@kibs21k
Copy link

kibs21k commented Jun 24, 2016

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
Copy link

ghost commented Jun 24, 2016

@lb021 my bad. 😄

@twolfson
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@gregory-h @rmevans1 @twolfson @kibs21k