Chrome 53 上作为背景图像缩放的 SVG 图像精灵崩溃

Question

我在使用 svg 图像 sprite 作为背景图像时遇到问题。在 100% 缩放时一切正常，但当我放大或缩小时，背景图像会崩溃。另请注意，它仅在设置边框半径属性时才起作用，它在 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) 是Chrome53的bug吗？ 2) 如何避免这种行为？

Answer 1

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

Chrome issue

Chrome 53 上作为背景图像缩放的 SVG 图像精灵崩溃

SVG image sprite as background image zoom crash on Chrome 53

css

svg

background-image

zooming