search

twolfson / grunt-spritesmith

Grunt task for converting a set of images into a spritesheet and corresponding CSS variables
MIT License
1.14k stars 92 forks source link

Firefox (latest version) not able to show background images from spritesheet #112

Closed bdelaney closed 9 years ago

bdelaney commented 9 years ago

I'm using spritesmith to generate several spritesheets in a site I'm developing. Everything looked fine until I began to test in Firefox (a browser I hardly ever use). To my surprise a slider I was loading with images into via list item tags did not show any images. Then I checked a couple of pages where I'm using sprites inside of table data tags for a table. Same issue.

I'm not targeting Spritesmith for this of course. It's a Firefox double whammy. I've searched for almost a day to try and resolve this and I have used images directly in the background-image property of the css. Believe me, I have reset Firefox cleared caches, and tried a different PC. To no avail.

Consider this a warning to anyone wanting to be cross-browser friendly. Firefox is evil when it comes to background images. There seems to be about a decade of history with Firefox and images. At this point, I'm completely flummoxed and hope someone will offer a good workaround.

Or perhaps I'll just have an unfriendly alert popup saying 'do not use Firefox' to any potential site visitor. :-1:

twolfson commented 9 years ago

Can you provide more details on the version of Firefox? Is this Firefox Aurora/Dev? If so, what is the version listed?

bdelaney commented 9 years ago

FF 35.0.1 on Windows (totally refreshed, cache emptied)

I found very old threads (2008) on this that made sense. Apparently, FF does not recognize that there should be space for the CSS referenced image. Huh!?

So, I added style="display:block;" inside of my img tag and voila, my sprites show up. Before my list item and table data tags had been empty except for the class corresponding to the spritesheet css. I don't know if this would be true for any element I used background image in for Firefox, but in my case, the list items and table data had to 'have space' before the style was applied. Weird.

Current versions of Chrome, Opera, IE, Safari, did not have this problem. But adding that style display:block generically causes some misalignment in these browsers. I'm testing this now with ALL other CSS (and js) stripped out, but perhaps using a CSS reset stylesheet will change this behavior. My initial pages that showed this behavior had Bootstrap css loaded so I'm not hopeful that a css reset will help.

This behavior also was averted if I replaced the img element class based image retrieval with a src="imagefile" attribute. Not referring to the spritesheet of course, but to a separate image file. And that would make this whole exercise of using sprites a moot point.

If you like, I can set up a jsFiddle or a Gist to reproduce this. But it's not a Spritesmith problem and you are welcome to close this issue.

I installed Firefox Aurora dev, 37.0a2 just now and tested. Same issue. Will not display background images called via stylesheet unless I add display:block.

Maybe someone will come up with a better workaround.

twolfson commented 9 years ago

The display: block sounds familiar (inline-block should also work). An inline element should not be allowed to define a width/height since it flows like text.

I think I might be suggesting the wrong usage from the CSS template. I am busy at the moment but will revisit this by the end of next weekend.

twolfson commented 9 years ago

For reference, I am referring to this example usage:

https://github.com/twolfson/spritesheet-templates/blob/8.2.0/lib/templates/css.template.mustache#L5

bdelaney commented 9 years ago

After much experimentation, I landed on a simple fix for now, but it's based on using Bootstrap css. I added the class img-responsive to the image tags I was calling for the sprite in. <img class="icon-aver img-responsive">

All the other tricks I tried with just the display class came up short and caused spacing issues. Img-responsive is the right combination of attributes. Believe me, I tried a lot of small fixes.

Your comment got me to look at the parameter cssFormat. Good to know that exists and I will make use of in the future for Sass. Spritesmith has much more power than I understood at first glance.

At this point I'm relieved that things are working in Firefox. Again, this is no fault of Spritesmith's and it makes me wonder if the Mozilla team is aware of this issue.

twolfson commented 9 years ago

I have created a Codepen and verified the issue with using <i> in the example.

http://codepen.io/twolfson/pen/emypmB

I am going to adjust the example to list both a div and img. Once again, the issue has nothing to do with Firefox but our lightweight CSS rules (i.e. we never set display).

I will close this issue once the updated template has landed.

twolfson commented 9 years ago

The patch has been released in 8.2.1. Every other spritesmith module should pick up this change automatically. Thanks for the bug report!