1

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.

cchana
  • 4,899
  • 3
  • 33
  • 43

3 Answers3

4

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.

cchana
  • 4,899
  • 3
  • 33
  • 43
0

I checked your website, and the background works, try to clear all navigation data (ctrl+shift+delete select all check-boxes and any time of).

mkj
  • 2,761
  • 5
  • 24
  • 28
Netmaster
  • 287
  • 1
  • 10
  • 27
  • What version of Chrome do you have? If at all avoidable, I'd prefer not to have to do that. I'll add this to the question: even in private browsing mode, I get the same issue. – cchana May 18 '12 at 08:33
  • But you should do it, because the problem is in your browser – Netmaster May 18 '12 at 08:37
0

In my chrome(20.0.1132.11 dev-m) everything is ok.

The problem may be in the extensions (try to disable all) or the most chrome (try to reinstall it)

Update: Same bug on SO and in accordance with the answers to that question, this bug is known and not yet fixed

Community
  • 1
  • 1
Vladimir Starkov
  • 19,264
  • 8
  • 60
  • 114
  • Disabled extensions, but no luck so I took the drastic step of re-installing but still no luck :( – cchana May 18 '12 at 08:49
  • I saw that question before I posted this one, but towards the end of the thread, it seems like the issue was fixed in Chrome 17. I don't get the problem on the pages they've linked too and find it even more odd that out of the two very similar sites I've built, one is fine and one isn't. – cchana May 18 '12 at 10:11
  • if you try to set the property 'background-attachment' to any value other than 'fixed', the problem persists? – Vladimir Starkov May 18 '12 at 10:28
  • According to that other question, changing a CSS value related to the display (such as top, for positioned elements) causes the background to reappear. So you could work around this by periodically changing some display-related CSS... provided you can find something to change that doesn't do anything obvious to the user. (Perhaps adding a 1px jog on window.load and immediately snapping back?) – Brilliand May 18 '12 at 10:38
  • @matmuchrapna for me default is scroll, changed the value to all accepted and no difference. – cchana May 18 '12 at 10:55
  • @Brilliand the other question relates to backgrounds on elements other than body and that fix may work for those, but can't get it to work for body through JS or through changing values using the inspector – cchana May 18 '12 at 10:56
  • @cchana [fixing-the-chrome-background-refresh-bug](http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/) doesn't work for you? – Vladimir Starkov May 18 '12 at 10:58
  • @matmuchrapna no but odly, it returns `background` as an empty string and both `backgroundImage` and `backgroundColor` as undefined. Changing actually makes no difference, the values are set as far as JavaScript is concerned, but no visible difference in the browser. I just tried it with JavaScript, rather than jQuery as I haven't used the library for this site. Seems that Chrome isn't setting the values at all. – cchana May 18 '12 at 11:09