CSS background image disappearing in Chrome

Question

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.

Here is the page in question: 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):

.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.

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.

Answer 1

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).

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

http://kolina.fi/chrometest.html

Answer 2

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.

Answer 3

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

My colleague, Andrew, posted our solution here: 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

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

Answer 4

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

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

to

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

Answer 5

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