Take a look at the Demo. Make sure to test it on both Chrome and Firefox to experience the difference.
I've created a div element with the following CSS classes to make 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;
}
In my HTML code, I have included the following lines:
<div class="what-right-arrow " />
...
<div class="what-left-arrow " />
...
<div class="what-comas" />
...
<div class="what-boart-logo" /> //and so on for all div elements in different positions
Upon testing the code in Chrome, IE, and Firefox, everything worked fine except for Firefox.
The issue lies in the vibration of images (specifically what-right-arrow, what-left-arrow, and what-comma) which constantly oscillate up and down as well as left and right.
Could this be due to improper spriting or is it a problem specifically related to Firefox?