Background color CSS not working in safari but working fine in Chrome, Firefox

Question

I have made a website in which i am applying white background color(#FFF ) to my panels(a div) to add some transparency effect. This works very fine in chrome & firefox . But doesn't work in Safari. What should i do to create the same effect in safari.

.panel{
    position:relative;
    background-color: #FFF;
    background:#FFF;
    bgcolor:#FFF;
    #safari { background-color:#FFF }
}

I have tried all versions of background color(bgcolor, background-color etc) & also tried the hack

#safari{
    background-color:#FFF
} 

but none worked. please help. Also the Link tags not working in IE only but working perfectly in other browsers.

Answer 1

A white background does not add any transparency.

You can try the following, which should work in all browsers:

.my-class {
    background-color: rgb(255,255,255); // White background for old browsers
    background-color: rgba(255,255,255,0.5); // White background, 50% transparency for more modern browsers. Will be ignored by old browsers
}

Answer 2

This blog post suggests this CSS hack:

# @media screen and (-webkit-min-device-pixel-ratio:0) {
    #safari { background-color:#FFF }
}

Answer 3

try this:

   _::-webkit-full-page-media, _:future, :root .panel {
     background-color:#FFF
  }

Edited: this works for safari 7.1+ (in your case, 8.0)

Answer 4

If it is showing bit difference with background-color, just try this -

#safari {
background-color: #fff;
opacity: 1;
}