Chrome загадочно снижает положение SVG на 2px

Question

Я пытаюсь создать кучу ссылок на изображения из SVG-спрайтов, которые у меня есть, но у меня проблемы с кросс-браузером между Chrome и Safari и Firefox. У меня есть куча тегов, как это:

<a href="#" id="twitter-logo" class="socialIcon"></a> 
<a href="#" id="facebook-logo" class="socialIcon"></a> 

Тогда в моем CSS настроить фоновое изображение для всех из них

.socialIcons{ 
    background-image: url('../img/social.svg'); 
    width: 60px; 
    height: 60px; 
    display: inline-block; 
} 
#twitter-logo{background-position: 0px 0px;} 
#twitter-logo:hover{background-position: 0px -200px;} 
#facebook-logo{background-position: -79px 0px} 
#facebook-logo:hover{background-position: -79px -200px;} 

Это прекрасно работает как в Firefox и Safari, но в хроме похоже, что файл SVG на 2 пикселя выше, чем в других. Это означает, что верхняя часть моих значков находится на 2 пикселя ниже верхней части моего <a>, а мои иконки обрезаны на 2 пикселя от края. Чтобы исправить это, я могу вычесть 2 из каждого из значений y-значений фоновой позиции, но тогда у меня проблемы, потому что теперь они неправильны в Safari и Firefox.

Где находится этот таинственный сдвиг?

Answer 1

Я нашел решение на данный момент, Chrome и IE имеют одинаковую позицию y, в то время как Firefox и Safari имеют то же самое.

Firefox can not read "background-position-y", который IE и Chrome могут. Так исправить это вот так:

background-position: -177px -70px; // исправление firefox по y-позиции

background-position-y: -72px;

IE и Chrome будут читать последнюю строку и перезаписывать значение y в первой строке, я еще не нашел другого исправления.

Приветствия

Эдуардо

Answer 2

Я просто была такая же проблема придумать. В нашем SVG высота была установлена ​​на 165.745 пикселей. Как только я обновил эти значения до 166 пикселей, все выглядело правильно во всех браузерах.

Таким образом, похоже, что это связано с различием в том, как браузеры вокруг плавают в целые числа. Это согласуется с проблемой попыток поместить множество элементов, основанных на процентах, друг вокруг друга в гибком макете ... Chrome/IE имеет тенденцию добавлять пиксель или 2, иногда там, где FF нет.