CSS3 Responsive Image Sprite Compatibility in Firefox

Question

See Demo. Please check on Chrome and firefox and feel the difference

I have a div element that uses the css classes below. Basically, I'm creating a responsive sprite of images:

.what-wwb-logo, .what-national-geographic-logo, .what-atm-logo, .what-us-ski-logo-large, .what-boart-logo, 
.what-comas, .what-left-arrow, .what-right-arrow{
     max-width: 100%; 
     background-size: 100%;
     background-image: url('/images/sprites/what_our_client_say_new.png'); 
}
.what-wwb-logo { 
     background-position: 0 0%;
     background-size: 100%;
     padding-bottom: 41%;
}
.what-national-geographic-logo {
     background-position: 0 16.588419%;
     background-size: 118.648019%;
     padding-bottom: 59%; 
     max-width: 77%;
}
.what-atm-logo { 
     background-position: 0 42.466823%; 
     background-size: 146.685879%;
     padding-bottom: 94%;
     max-width: 100%; 
}
.what-us-ski-logo-large { 
     background-position: 0 65.003723%;
     background-size: 181.785714%;
     padding-bottom: 65%;
     max-width: 70%;
 }
.what-boart-logo { 
     background-position: 0 84.194978%; 
     background-size: 200.393701%; 
     padding-bottom: 84%; 
     max-width: 84%; 
 }
.what-comas { 
     background-position: 0 92.206077%;
     background-size: 435.042735%;
     padding-bottom: 62%; 
     max-width: 80%; 
 }
.what-left-arrow { 
     background-position: 0 96.196003%;
     background-size: 820.967742%; 
     padding-bottom: 93%;
     min-width: 7px; 
 }
.what-right-arrow { 
     background-position: 0 100%;
     background-size: 820.967742%; 
     padding-bottom: 93%;
     min-width: 7px; 
 }

And in my HTML I have the following code:

<div class="what-right-arrow " />
...
<div class="what-left-arrow " />
...
<div class="what-comas" />
...
<div class="what-boart-logo" /> // and so on and all divs in different position

I ran the HTML in Chrome, IE and Firefox. It ran good in Chrome and IE but not in Firefox.

The problem is that images (ONLY what-right-arrow, what-left-arrow and what-comma) are vibrating (up and down, left and right) all the time.

Is spriting not done properly or is it a Firefox problem ?

Answer 1

I think it's a Firefox problem as there are some bug reports about shaking images in Firefox.

It seems that when I move the background-image style onto the individual selector the vibration stops: See Demo

Example:

// Vibrates
.a, .b {background-image: url(example.png); background-size:50%;}

// Doesn't Vibrate
.a, .b {background-size:50%;}
.a {background-image: url(example.png);}
.b {background-image: url(example.png);}

I had the same problem with the vibrating background images in firefox when resizing the sprite. After adding the background-image to each instruction the problem went away, so the fix is not limited to just your demo.

Personally I'm starting to doubt this approach of resizing the sprite. I'm doing it as a solution for retina devices, but it seems the code is harder to maintain and the sprites are less precise (as not all browsers support fractions of a pixel well). The end result is:

• Vibrating bug in firefox and the needed workarounds
• The background-position values are just off enough to cut images off in an odd manner
• Needing a solution to multiple all values by 50%, which means I can't just copy and paste the generated code from a sprite maker.