Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS background image disappearing in Chrome

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.

like image 552
daSong Avatar asked Feb 14 '12 11:02

daSong


People also ask

Why is my background image not showing up CSS?

Make sure the image path is set correctly in the background-image url. Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.

Why background image is not showing in Div?

I recommend moving your css from the inline scope. Assuming that your . png file actually exists, try setting the background size and repeat tags. If that doesn't work, try checking in your browser's developer tools for the response codes and making sure that the url is correct.

How do I stop my background image from repeating in CSS?

The CSS background-repeat is what you're looking for. If you want the background image not to repeat at all, use background-repeat: no-repeat; .


2 Answers

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.

like image 170
ior3k Avatar answered Oct 24 '22 17:10

ior3k


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

like image 27
Qha Avatar answered Oct 24 '22 16:10

Qha