CODEWITHSUNDEEP
cssfirefoxcss-sprites
Collector
Collector

Reputation: 2094

Firefox: Some sprites not shown: works perfectly in IE/Chrome/Opera

UPDATE: the link in the question wouldn't show the problem now as I've changed the sprite to a shorter, more squared one. This is costing a few extra KBs in both the compressed PNG file and the resulting CSS.

We have a page with many flag icons that are all present in a single image file and split to sprites using CSS. The page works perfectly on IE/Chrome/Opera but on Firefox only some of these images are not shown. I've attached screen shots and the link is http://colnect.com/en/gift_cards/companies/sort/by_count

Firefox shows partially

IE/Chrome/Opera all show the page well

Upvotes: 2

Views: 407

Answers (1)

yunzen
yunzen

Reputation: 33439

I see this in Firefox 34.0.5 on Win 8

Maybe the background-image is too large. It is 16,000 Pixels high.

The background-position works only until element with class name _f2307 (background-position: 0 -8160px;), Class name _f2308 (background-position: 0 -8192px;) and any subsequent class names fail.

Maybe use something like spritesmith (which I fell in love with, the moment I discovered it. I use it with grunt) to create a sprite image which consists of several rows and cols of sprite segments instead of just one column.

Although this seems below the 32768 Pixels that float around the internet for limitations, there might be a undocumented feature crawling in in a recent firefox implementation. But otherwise 8192 equals 32768 divided by four. This might be a meaningfull number.

And maybe you just found a bug. You should file this to mozilla.

addendum

The problem must be something else as you can see in this codepen: http://codepen.io/HerrSerker/pen/azNQqR

Scroll down, .four is interrupted, and .five is complete. The only differ by the border value

Upvotes: 2

Related Questions