Question

使用svg图像精灵作为背景图像时遇到问题。在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

SVG图像精灵作为背景图像变焦在Chrome 53上崩溃

1 个答案: