CODEWITHSUNDEEP
csssvgbackground-imagezooming
Romick
Romick

Reputation: 163

SVG image sprite as background image zoom crash on Chrome 53

I have a problem when using svg image sprite as background image. Everything works fine on 100% zoom, but when I do zoom in or zoom out background image are crashed. Also please notice that it didn't work only when border radius property is set and it works on Chrome version 52, but not the latest 53. I have created a demo: 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) Is it Chrome 53 bug? 2) How to avoid this behavior?

Upvotes: 0

Views: 321

Answers (1)

Danylo Gudz
Danylo Gudz

Reputation: 2656

It seems to be a Chrome bug. I have the same problem.

Chrome issue

Upvotes: 1

Related Questions