css - SVG 图像 Sprite 作为背景图像缩放在 Chrome 53 上崩溃

Question

我在使用 svg 图像 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) 如何避免这种行为？

Answer 1

这似乎是 Chrome 的一个错误。我有同样的问题。

Chrome issue