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.

Solution 1

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.

Solution 2

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

Solution 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!

Solution 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")

View more solutions

Comments

[daSong]

Thanks, that bug is exactly what I'm experiencing, these are only happening on divs that were previously hidden.

[daSong]

This workaround resolves the issue for me: blog.andrewcantino.com/blog/2012/02/15/…

[daSong]

Yes, since creating this question I have found that there are at least 4 open tickets on code.google.com for it: code.google.com/p/chromium/issues/detail?id=111218 code.google.com/p/chromium/issues/detail?id=70268 code.google.com/p/chromium/issues/detail?id=109049 code.google.com/p/chromium/issues/detail?id=113774 It looks to be a buy in the webkit on Chrome 17 for Mac.

[Tom Roggero]

Or in one line var fix = function($s){ var $s.css("background-image", $s.css("background-image")); } and then you can use it as... fix($(".myselector"))

[Paul Irish]

This issue has been fixed and merged into dev and beta channels: code.google.com/p/chromium/issues/detail?id=111218#c43 As of today, it looks like it hasn't yet shipped to stable, but that should happen soon. You can watch googlechromereleases.blogspot.com but it should be a matter of days.

[Scott Solmer]

Based on the information provided by other users, it would seem that this is not a solution. Have you tested this code?