CSS3 Отзывчивый образ Sprite Совместимость в Firefox

Question

См. Demo. Пожалуйста, проверьте Chrome и firefox и почувствуйте разницу.

У меня есть элемент div, который использует классы css ниже. В основном, я создаю отзывчивый спрайт изображений:

.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; 
} 

И в моем HTML У меня есть следующий код:

<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 

Я побежал HTML в Chrome, IE и Firefox. Это хорошо работает в Chrome и IE, но не в Firefox.

Проблема в том, что изображения (ТОЛЬКО what-right-arrow, what-left-arrow и what-comma) постоянно вибрируют (вверх и вниз, влево и вправо).

Не написано ли это неправильно или проблема с Firefox?

Answer 1

Я думаю, что это проблема Firefox, так как есть некоторые сообщения об ошибках в встряхивании изображений в Firefox.

Кажется, что при перемещении background-image стиля на индивидуальный селектор вибрация останавливается: See Demo

Пример:

// 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);} 

У меня был та же проблема с вибрирующими фоновыми изображениями в Firefox при изменении размера спрайт. После добавления background-image к каждой инструкции проблема исчезла, поэтому исправление не ограничивается только вашей демонстрацией.

Лично я начинаю сомневаться в этом изменении размера спрайта. Я делаю это как решение для устройств сетчатки, но, похоже, сложнее поддерживать код, а спрайты менее точны (поскольку не все браузеры поддерживают доли пиксельной колодки). Конечный результат:

• Вибрационный ошибка в Firefox и необходимые обходные
• В background-position значения только достаточно от вырезать изображения от нечетным образом
• нидинг решение множества всех значений на 50% , что означает, что я не могу просто скопировать и вставить сгенерированный код из создателя спрайта.