Блог

У меня проблема при использовании svg image sprite в качестве фонового изображения. Все работает нормально при 100%-ном увеличении, но когда я увеличиваю или уменьшаю масштаб фонового изображения, происходит сбой. Также обратите внимание, что это не сработало только тогда, когда установлено свойство border radius, и оно работает в Chrome версии 52, но не в последней версии 53. Я создал демонстрационную версию: https://jsfiddle.net/t3m9gpeL

 .icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-2.svg") no-repeat;
}
.icon-clock {
    background-size: 32px 96px;
    background-position: 0 0;
}
.icon-heart {
    background-size: 32px 96px;
    background-position: 0 -32px;
}
.icon-arrow-right {
    background-size: 32px 96px;
    background-position: 0 -64px;
}
.block-with-border .icon {
    border: 1px solid red;
}
.block-with-border-radius .icon {
    border-radius: 5px;
}
.block-with-border-and-border-radius .icon {
    border-radius: 5px;
    border: 1px solid red;
}
  

1) Это ошибка Chrome 53?
2) Как избежать такого поведения?

Похоже, это ошибка Chrome. У меня такая же проблема.

Проблема с Chrome