firefox background position percent not working

Question

Я объединил набор изображений в большой, чтобы сохранить HTTP-запросы и использовал background-position в процентах для настройки изображения. Процент используется, а не пиксель, поскольку ширина изображений контролируется родительским элементом.

Объединённая изображение как:

Как об оказанном результате, пожалуйста, обратитесь к первым пяти изображениям в http://zhujianer.com/.

Он отлично работает на Chrome. Из консоли можно увидеть селектор CSS.

Но это неожиданно использует то же изображение в Firefox. (Протестировано на FF 17.0.1 на Mac) От Firebug селектор есть, но атрибут background-position-x: -200%; ушел. И даже если я его добавлю, FF автоматически удалит его. Таким образом, кажется, что это считается незаконным для FF.

Полный CSS код (с помощью SCSS):

.process { 
    width: 120px; 
    height: 120px; 
    max-width: 100%; 
    border-radius: 60px; 
    margin: 0 auto; 

    .image-block { 
     width: 90%; 
     height: 90%; 
     background-size: 500%; 
     margin: 0 auto; 
     position: relative; 
     top: 5%; 
     background-image: url('../img/process.png'); 

     &:hover { 
      background-position-y: 100%; 
     }; 
    } 

    &#process-idea .image-block { 
     background-position-x: 0; 
    } 

    &#process-design .image-block { 
     background-position-x: -100%; 
    } 

    &#process-code .image-block { 
     background-position-x: -200%; 
    } 

    &#process-launch .image-block { 
     background-position-x: -300%; 
    } 

    &#process-monitor .image-block { 
     background-position-x: -400%; 
    } 
} 

Answer 1

FF не знает о background-position-x, он знает только о фоновом положении. Таким образом, вы можете написать это как:

#process-section #process-idea.process .image-block { 
    background-position: -200% 0; 
}