Chromeでズームすると画像スプライトの位置がずれる

Question

ズームのときは、画像スプライトのアイコンの位置がずれることがあります。あなたがバックグラウンドイメージから遠ざかるにつれて、ポジションは少し下がっているようです。これはChromeでのみ発生します。

ここCSSです。

.feature-icon { 
    height: 22px; 
    width: 22px; 
    display: inline-block; 
    background-image:url(feature-icon-sprite.png); 
    background-size: 22px; 
} 
.schedule { 
    background-position: 0 0; 
} 
.selections { 
    background-position: 0 -22px; 
} 
.messages 
    background-position: 0 -44px; 
} 
... 

ここにHTMLがあります。

<span class="feature-icon schedule"></span> 
<span class="feature-icon selections"></span> 
<span class="feature-icon messages"></span> 

私はインターネットの周りの記事をthisのように見ました。 Chromeのズームでピクセルの丸めの問題があるように思えます。問題を回避するためにサイズを20pxに変更しようとしましたが、110％のズームを行ってもそれが発生します。

Answer 1

イメージのフルバージョンは3つの「サムズアップ」のように見えます。あなたは（私はあなたが提供された例に基づいてこれを試みたが、これは良好スケール）以下でスプライト要素を置き換えることができます。

<img src="data:image/png;base64,yourbase64stringhere" > 

を今あなたがする必要があるすべては、画像の非表示部分（例えば66です、右側に6％）。このためには、clip pathを使用するか、スプライトを切り捨てて、サムズアップアイコンが1つしかないようにすることができます。

Answer 2

私はこの問題を解決するためにautoでバックグラウンドサイズを追加できると思います。これは私のために働く。

.thump { 
    background-size: auto 100%; 
} 

これだけ作品すべてのアイコンが1行または列に並ぶ。（カラムは、それがあるべき：100% auto）。次の式のようになります。

background-size: auto 100%/(rows); 

background-size: 100%/(columns) auto; 

このスタイルでは、背景画像が必要に応じてdivに修正されます。

お手数ですがお手伝いします。

.feature-icon { 
    background-size: auto; 
} 

画像の位置がずれつつされていませんが、多分あなたはそれをチェックするために必要なすべてのCSSを提供していない：

Answer 3

は動作します.feature-icon autoに背景のサイズを設定するように思えます。

詳しくはthis fiddleをご覧ください。

Answer 4

codepenに

background-size: cover; 
background-repeat: no-repeat; 

を追加するとき、私は何の問題を見ていない...