CSS 背景图像在 Chrome 中消失

CSS background image disappearing in Chrome

提问by daSong

This problem is only happening in Google Chrome on Mac OS X (Chrome 17). I've tested it on all the major browsers on Mac and Windows 7.

此问题仅在 Mac OS X (Chrome 17) 上的 Google Chrome 中发生。我已经在 Mac 和 Windows 7 上的所有主要浏览器上对其进行了测试。

Here is the page in question: http://dealsfortherich.com/drop/

这是有问题的页面：http: //dealsfortherich.com/drop/

As you can see, I'm loading divs via JQuery AJAX. The page is always fine on "Refresh."
You can navigate pages with the left and right arrows. The problem happens when you change pages; especially when you change pages when scrolling the page quickly. Try scrolling the page down very fast and hit the right arrow. The background images that were already loaded via CSS (for example):

如您所见，我正在通过 JQuery AJAX 加载 div。该页面在“刷新”上始终正常。
您可以使用左右箭头浏览页面。换页时出现问题；尤其是在快速滚动页面时更改页面时。尝试非常快速地向下滚动页面并点击向右箭头。已经通过 CSS 加载的背景图片（例如）：

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

start to disappear. Only background images that are loaded with CSS start disappearing. All are fine. If you open Developer Tools on Chrome inspect the elements, you will see that the browser has the correct syntax and it has already downloaded the image into its cache. For some reason, it's just failing to display it. The CSS display value is correct. In the Inspector, for the div with the missing background, if you modify a value such as "top: 8px;" to "top: 9px;" the image suddenly appears.

开始消失。只有加载了 CSS 的背景图像才开始消失。一切都很好。如果您在 Chrome 上打开开发人员工具检查元素，您将看到浏览器具有正确的语法，并且已将图像下载到其缓存中。出于某种原因，它只是无法显示它。CSS 显示值正确。在Inspector中，对于缺少背景的div，如果修改一个值比如“top: 8px;” 到“顶部：9px；” 图像突然出现。

This is only happening in Chrome (v. 17) and Chrome Canary (v. 19) for Mac OS X (10.7.3). Should I report this bug to Google or is there a known work around or fix? I guess I can replace the s with s but I would rather do it correctly and fix this weird issue.

这仅在 Mac OS X (10.7.3) 的 Chrome (v. 17) 和 Chrome Canary (v. 19) 中发生。我应该向 Google 报告此错误，还是有已知的解决方法或修复方法？我想我可以用 s 替换 s 但我宁愿正确地做并解决这个奇怪的问题。

采纳答案by ior3k

I don't know if this is the same issue, but the root is probably the same: http://code.google.com/p/chromium/issues/detail?id=111218. Based on that report, I don't think there's a known fix yet.

我不知道这是否是同一个问题，但根可能是相同的：http: //code.google.com/p/chromium/issues/detail?id=111218。根据该报告，我认为目前还没有已知的修复方法。

回答by Qha

I had the same problem and diagnosed it for hours, but it's not about your code, it's a memory related bug in latest chrome. In my experience it doesn't happen to small images, so a temporary solution would be to decrease the file size (to under 10kB or so).

我遇到了同样的问题并对其进行了数小时的诊断，但这与您的代码无关，而是与最新 chrome 中的内存相关的错误。根据我的经验，小图像不会发生这种情况，因此临时解决方案是减小文件大小（小于 10kB 左右）。

I have a test file here, showing the difference between a big and a small background image.

我这里有一个测试文件，显示了大背景图像和小背景图像之间的区别。

http://kolina.fi/chrometest.html

http://kolina.fi/chrometest.html

回答by rcneel

We worked up a solution for this issue until Chromium/Chrome "fixes the glitch" (hi, Milton)...

我们为此问题制定了解决方案，直到 Chromium/Chrome“修复故障”（嗨，Milton）...

My colleague, Andrew, posted our solution here: http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/

我的同事 Andrew 在此处发布了我们的解决方案：http: //blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/

You can see the page in question at: http://www.mavenlink.com/tour

您可以在以下位置查看相关页面：http: //www.mavenlink.com/tour

It sounds like this has worked for others as well, but it's ugly!

听起来这对其他人也有效，但它很难看！

回答by Chris Edwards

I've recently had this issue, and the fix was to use the complete url, rather than a relative path.

我最近遇到了这个问题，解决方法是使用完整的 url，而不是相对路径。

E.g. change url(images/image.png)

例如改变 url(images/image.png)

to

到

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

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

回答by Yorik

Use :url(.//images path. The .// should solve the problem.

使用 :url(.//images path. .// 应该可以解决问题。