12

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.

daSong
  • 407
  • 1
  • 5
  • 9
  • For what it's worth, I have just encountered a similar issue with background images as data urls, i.e. `background: url(data:image/png;base64,...)` doesn't display on Chrome but it works on Firefox. I don't think it has anything to do with AJAX. – icedwater Nov 01 '18 at 02:57

5 Answers5

9

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.

ior3k
  • 430
  • 5
  • 9
  • 1
    Thanks, that bug is exactly what I'm experiencing, these are only happening on divs that were previously hidden. – daSong Feb 14 '12 at 19:20
  • 2
    This workaround resolves the issue for me: http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/ – daSong Feb 16 '12 at 14:16
  • 1
    This issue has been fixed and merged into dev and beta channels: http://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 http://googlechromereleases.blogspot.com/ but it should be a matter of days. – Paul Irish Feb 29 '12 at 22:49
3

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

Qha
  • 49
  • 3
  • Yes, since creating this question I have found that there are at least 4 open tickets on code.google.com for it: http://code.google.com/p/chromium/issues/detail?id=111218 http://code.google.com/p/chromium/issues/detail?id=70268 http://code.google.com/p/chromium/issues/detail?id=109049 http://code.google.com/p/chromium/issues/detail?id=113774 It looks to be a buy in the webkit on Chrome 17 for Mac. – daSong Feb 16 '12 at 14:19
2

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!

rcneel
  • 21
  • 3
  • 1
    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"))` – Tom Roggero Feb 23 '12 at 20:00
1

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

Chris Edwards
  • 3,514
  • 2
  • 33
  • 40
-3

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

  • 1
    Based on the information provided by other users, it would seem that this is not a solution. Have you tested this code? – Scott Solmer Dec 17 '13 at 19:57