Safari Rendering image background black on load

Question

I'm currently working on a website and having an issue with Safari. When loading an image there is a black background that is placed as a stand in. I would rather this be transparent or white, but I can't seem to figure it out. Check it out:

http://blazing-ocean-6482.herokuapp.com/

I've made html and body have background-color:white; but this doesn't seem to have changed the issue.

Indicator

Answer 1

Just save the PNG image with interlaced option

Endoparasite

I tried "interlaced", and it doesn't solve the problem, at least in Safari 6.0.2. – Theatheaceous

Answer 2

I had the same problem in safari 6. My image was in grayscale color space. I switched it to rgb and the problem disappeared. Try to check your images color space settings!

Deerstalker

Answer 3

This happens because the PNG has no alpha channel. Photoshop saves the image with the alpha channel only if the image has transparent pixels. In order to work properly in Safari, IHDR chunk of PNG image must have "truecolor-apha" in it contents. You can see the png chunks in tweakpng (http://entropymine.com/jason/tweakpng/) or similar programs.

Hysteric

Answer 4

I've had the same issue as above (only in Safari too). My body tag has a background image, is repeat-x and is used as the background for the whole website. When a user goes to the page in Safari, there is a flash of black on page load. I've searched for ages for a solution to this, but it appears to be an unresolved bug with Safari.

I'ved tried adding "style: background-color: #FFF" to the html and body tags and also tried using the old school "bgcolor: #FFF" - none work.

The only way I could get Safari to behave was to use CSS + jQuery. Give the body a class of "bg-on" in your html and CSS files. In a linked .js file or in the of your html page in tags:

jQuery(function ($) {
$(document).ready(function(){

$('body').removeClass('bg-on');

});//end document ready

/* NOTE (window).load fires when images have been fully loaded */
$(window).load(function() {

$('body').addClass('bg-on');

});//end window load function
});//end jQuery function no conflict mode

What the above does is when the DOM is loaded by the browser, it removes the class from the body, therefore Safari won't show a black background as no background-image is there. Then when the window.load event fires, when all assets have been loaded, the body is given the background image...

It won't affect JS disabled browsers either, as the class of "bg-on" is hardcoded into the html.

Not a particularly elegant solution, but it works for me.

Lebna

Answer 5

I had this problem recently in Safari 6.0.2, which also showed up in mobile Safari (at least in iOS 6). Saving my background as interlaced didn't work across the board & the colour space was RGB. Thankfully my background had very few colours & converting it to GIF fixed the problem entirely.

Orpington

Answer 6

My problem was, that I have uploaded correct file, but with page builder I have edited the image - and was converted to jpg from png. First make png with alpha and then upload - worked.

Cinderellacindi