cchana cchana - 1 month ago 5
CSS Question

Chrome not showing background images or colour on body

When checking my website a couple of days ago, everything was OK, but having looked at it this morning in Chrome, the background image and colour applied to the body have just disappeared completely. Safari is also looking pretty bad with the background colour visible and the background image on the body only visible behind other background images!

Things I've tried...


  • resizing the background image so that it's a lot smaller

  • removing the image and just having a background colour

  • viewing the site in incognito mode



Absolutely no difference in the outcome. I've cleared the cache and tried disabling caching but to no avail. Also, the file definitely exists. Not only can I see them being downloaded in the 'Network' tab in the Chrome developer tools, you can see it here: http://charanj.it/assets/images/website-bg.jpg

You can also see the smaller version I tried http://charanj.it/assets/images/website-bg-small.jpg

Weirdly, resizing the browser window in Safari brings the background image in. Another odd thing is that another site I built using almost exactly the same background techniques shows the images just fine, see http://nikeplusphp.org

The CSS has been generated using LESSPHP but I'm sure this isn't the issue as it was working fine before and no changes have been made to the CSS in months.

I have Chrome v19.0.1084.46 m and Safari 5.1.2, Windows 7 but the issue also occurred on my MacBook with the Chrome 19.

Tiny bit more information: Issue happens in a locally run copy of the website too.

Answer

Although it seems to be a browser issue, the culprit was the following line of CSS at the top of the stylesheet:

* {
    -webkit-backface-visibility: hidden;
}

I tried moving it elsewhere but I still get the same issue. Applying to individual elements seems to work, but as I no longer use any 3D transitions on the site, there's no need for it and removing it has solved the problem.