2016-10-04 9 views
0

svg image spriteを背景画像として使用すると問題が発生します。すべて100%ズームでうまく動作しますが、ズームインしたりズームアウトしたりすると背景画像がクラッシュします。それは)https://jsfiddle.net/t3m9gpeL背景画像としてのSVG画像スプライトChromeでのズームクラッシュ53

.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: はまた、国境radiusプロパティが設定されている場合、それだけで機能しなかったことに気づくしてください、それはChromeバージョン52では動作するのですが、最新の53 は私がデモを作成していませんChrome 53のバグ? 2)この現象を回避するにはどうすればよいですか?

答えて

1

Chromeのバグのようです。私は同じ問題を抱えています。

Chrome issue