web-dev-qa-db-ja.com

CSSの背景画像がChrome

この問題は、Google Chrome）でのみ発生します。MacとWindows7のすべての主要なブラウザでテストしました。

問題のページは次のとおりです。 http://dealsfortherich.com/drop/

ご覧のとおり、JQueryAJAXを介してdivを読み込んでいます。このページは「更新」で常に問題ありません。
左右の矢印でページをナビゲートできます。ページを変更すると問題が発生します。特に、ページをすばやくスクロールするときにページを変更する場合。ページを非常に速く下にスクロールして、右矢印を押してみてください。 CSSを介してすでにロードされている背景画像（例）：

.sort_block{ background: url(images/sort_block.png) no-repeat;}

消え始めます。 CSSがロードされた背景画像のみが消え始めます。すべて大丈夫です。 Chrome要素を調べる）で開発ツールを開くと、ブラウザの構文が正しく、画像がキャッシュにダウンロードされていることがわかります。何らかの理由で、表示に失敗しているだけです。 CSSの表示値は正しいです。インスペクターで、背景が欠落しているdivの場合、「top：8px;」から「top：9px;」などの値を変更すると、画像が突然表示されます。

これは、Mac OS X（10.7.3）のChrome（v。17）およびChrome Canary（v。19）でのみ発生します）。報告する必要があります。このバグはGoogleにありますか、それとも既知の回避策や修正がありますか？sをsに置き換えることはできると思いますが、正しく実行してこの奇妙な問題を修正したいと思います。

cssmacosgoogle-chromebackgroundbackground-image
12
daSong

これが同じ問題であるかどうかはわかりませんが、ルートはおそらく同じです： http://code.google.com/p/chromium/issues/detail?id=111218 。そのレポートに基づくと、既知の修正はまだないと思います。

9
ior3k

私は同じ問題を抱えて何時間も診断しましたが、それはあなたのコードに関するものではなく、最新のChromeのメモリ関連のバグです。私の経験では、小さな画像では発生しないため、一時的な解決策はファイルサイズを（10kB以下に）減らすことです。

ここにテストファイルがあり、大きな背景画像と小さな背景画像の違いを示しています。

http://kolina.fi/chrometest.html

3
Qha

Chromium/Chromeが「グリッチを修正する」まで、この問題の解決策を練り上げました（こんにちは、ミルトン）...

私の同僚のアンドリューは、私たちのソリューションをここに投稿しました： http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/

問題のページは次の場所で確認できます： http://www.mavenlink.com/tour

これは他の人にもうまくいったようですが、醜いです！

2
rcneel

最近この問題が発生しました。修正は、相対パスではなく完全なURLを使用することでした。

例えば。 url(images/image.png)を変更します

に

url("http://yoursite.com/images/image.png")

1
Chris Edwards