Occasionally when someone loads my site in Safari, parts of the background image fail to load, leaving white segments. As soon as you refresh or resize the window, the white disappears. Any suggestions?

Screenshot of white segments here: http://www.danm.com.au/images/white.png

2 answers

1
point

there's a fixed height on body of 600px, but your content is taller than that. Remove some of the styling on body, so it renders fully and then the fixed elements over the top may work a little better.

You also have no doctype declaration, which will put browsers into quirks mode with potentially unexpected results..

set a doctype: http://www.alistapart.com/articles/doctype/

Answered almost 7 years ago by Tony Crockford
  • Thanks for your help guys, really appreciate it. I've tried deleting the body height, adding a doctype, and adding a 8px margin and I still seem to be getting the white.. hrm, any other thoughts? Once again, thanks! Dan McGrath almost 7 years ago
  • Did you try setting the background color in both the html and body in the CSS? "html, body { background: #0d0d0d }" Mottie almost 7 years ago
o.k.w 2355
0
points

I am able to replicate the behaviour on my Safari (windows) by using a hard refresh.

On top of what Tony mentioned, clean up the jQuery library referencing. The one at line 11 is not found. The ones at lines 7 and 13 are duplicates, remove one of them.

If the problem still occur, try specifiying a padding of 8px for the 'body' element as the default uses a 8px margin which somehow is revealing a white background.

Answered almost 7 years ago by o.k.w
  • Thanks for your help guys, really appreciate it. I've tried deleting the body height, adding a doctype, and adding a 8px margin and I still seem to be getting the white.. hrm, any other thoughts? Once again, thanks! Dan McGrath almost 7 years ago
  • I forgot to mention you need to set the margin to 0 together with the padding as 8px. By the way, I suspect the issue is triggered by the `$('#page_effect').fadeIn` call. Have you clean up the jquery referencing? o.k.w almost 7 years ago
  • I just refreshed your page again, seems ok now. Yea? o.k.w almost 7 years ago
  • Hey o.k.w, killed the fade in, and tried padding too -still happening. Thanks for your help so far!.. will keep at it and try and cancel out more variables :) Dan McGrath almost 7 years ago
  • OK!.. think I've narrowed it down a little.. seems like the height and width of #bghome and #navigation are somehow effecting it.. I increased the width of 'bghome' which is the big 'D' that fades in, and the white bloc has disappeared on the left... Dan McGrath almost 7 years ago
  • ..but at the bottom of this height, you still see white. Dan McGrath almost 7 years ago
  • Hmm... I can't replicate the problem, is it still there? o.k.w almost 7 years ago
  • I made the width of #bghom really large, like 5000px and the height of #navigation about the same, and some how that's killed the white.. a bit of a hack, but seems to have kind of worked :D thanks for your help o.k.w :) Dan McGrath almost 7 years ago