Блог

Я использую background-image SVG-спрайт, и все отлично смотрится в моих версиях Safari, mobile Safari, Chrome, Firefox, Opera, IE и т.д. Однако фоновые позиции отображаются некорректно для нескольких моих коллег, у которых более новая версия Chrome (я знаю, что один из них использует версию 35.0.1916.153 на Mac, некоторые использовали другую более новую версию в Windows).

Вот как это выглядит в моей версии всех браузеров:

Вот как это выглядит в некоторых новых версиях Chrome:

HTML:

 <span class="icon icon--chat"></span>
  

CSS:

 .icon{
    background:url(data:image/svg xml;base64,[data]);
    font-family:sans-serif;
    background-position:top left;
    background-size:cover;
    display:inline-block;
    width:100px;
    height:100px;
    padding:0;
    margin:15px;
    cursor:default;
}

.icon--chat{
    background-position:0 4%;
}
  

Точно такой же код корректно работал в браузерах моих коллег, когда я размещал его в JsFiddle и Codepen, но здесь он в любом случае:http://jsfiddle.net/HgR2N /

Вот несколько вещей, которые я пробовал, которые не устранили проблему:

• изменение фонового изображения из SVG-файла с кодировкой URI данных в обычный SVG-файл
• использование пикселей для background-position вместо процентов
• добавление font-family:sans-serif; (я где-то читал, что это может исправить — понятия не имею)
• удаление полей box-sizing:border-box; и т.д.

Пожалуйста, дайте мне знать, если у вас есть какие-либо идеи о том, что может быть причиной этой проблемы и как я мог бы это исправить — спасибо!

Обновление: я обновил свой Chrome до версии 35.0.1916.153, так что теперь мы с моей коллегой используем точно такую же версию Chrome для Mac, и у нее проблемы, а у меня все еще в порядке…

Обновление: я добавил preserveAspectRatio="none" в качестве атрибута тег svg в файле svg, и это исправило это! Дополнительная информация здесь:http://www.yootheme.com/support/question/6801?order=modified

У меня была такая же проблема. Я исправил это, установив background-size точные значения (не используя auto ). Изначально я определил размер моего svg-спрайта следующим образом:

 .icon {
    background-image: url("sprite.svg");
    background-size: 4em auto;
}
  

Я изменил его на

 .icon {
    background-image: url("sprite.svg");
    background-size: 4em 99em;
}