Chromeの特定の画面サイズで背景画像が突然消えてしまう

Question

私のサイトでは、背景画像を持つi要素を含む多数のdivsがレンダリングされたコンテナがあります。それらのi要素はすべて同じバックグラウンドイメージを持ちますが、バックグラウンド位置が異なるため、HTTP要求を1回だけ行う必要があります。これは、小さなアイコンの一般的なベストプラクティスです。 divはコンテナ内で水平に配置する必要があります。

私の問題は、ChromeとFirefoxのブラウザ（最新バージョン）では、特定の（ワイド）画面サイズで背景画像のレンダリングが意図したとおりに機能しないということです。具体的には、Chrome上では、要素が隠されていない限り、要素の背景画像の一部を表示しません.Firefoxでは背景画像をまったく表示しません。

コンテナ内のdivsにfloat: leftを追加すると、レンダリングの問題が解決されます。しかし、浮動小数点を残して動作しないコンテナに要素を配置したい。

私の質問は、特定のブラウザでこの動作を引き起こしているのですが、どうすれば解決できますか？あなたが上で自分自身のために、この問題を見てすることができます

：

ここ

http://staging.koreanbuilds.net

はクローム上の行動のスクリーンショットであるとFirefox

にこれがためのCSSコードであります容器と要素：

/* Container of clickable champion icons */ 
#champContainer { 
    width: 100%; 
    padding-right: 10px; 
    padding-left: 10px; 
    text-align: center; 
    position: relative; 
} 

/* Champion images div container class */ 
.champIcon { 
    width: 65px; 
    height: 65px; 
    margin: 1px auto; 
    overflow: hidden; 
} 

.champIcon i { 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    -o-transition: all 0.3s ease; 
    -ms-transition: all 0.3s ease; 
} 

.champIcon i:hover { 
    zoom: 1.05; 
    cursor: pointer; 
    -moz-transform:scale(1.05); 
    -moz-transform-origin: 0 0; 
} 

さらにt彼は

.nodisplay { 
    display: none; 
} 

.yesdisplay { 
    display: inline-block; 
} 

私の要素は、常に次のクラス

.chmp { 
    display: inline-block; 
    overflow: hidden; 
    text-indent: -9999px; 
    text-align: left; 
    cursor: pointer; 
} 

だけでなく、例えば背景画像と位置を定義するクラスを持っているそれらの二つのクラスのいずれかを持っているのdiv

.chmpashe { 
    background-image: url(http://statics.koreanbuilds.net/champion_65x65/sprite.png); 
    background-position: 0 -455px; 
    width: 65px; 
    height: 65px; 
} 

Answer 1

あなたのコードに間違いはありません。私はそれが動作するかどうか、それがダウンしてあなたのスプライトシートをカットし、テストする価値があるかもしれないFirefoxの

にそれ自身の上ごspritesheetをロードするように見えることはできません、これはあなたがhereを見ていると同じ問題になる可能性がありますように見えます。

希望に応えたい！

編集：

ライブサイトを見てあなたは、エーテルの次元で1000個のピクセルを超えない、より伝統的な形のスタイルシートを持っています。ステージングで使用しているものが80,000ピクセルを超え、問題がどこにあるかがわかるようです。