CODEWITHSUNDEEP
htmlgoogle-chromecss
Tom Wilson
Tom Wilson

Reputation: 253

Box Shadow disappearing on Chrome

On Chrome, if I refresh my browser or open inspect element, the box shadow on the navigation bar disappears and simply does not show. This does not occur on IE. The only way to get it back is to hard refresh. Any ideas?

Website URL: http://tomwilson.pw/files/design/

My HTML is:

<div id="nav_wrapper">
<div id="nav_content">

<div id="nav_logo"></div>

<div id="navigation">

<a href="#" class="active">Home</a>
<a href="#">Link One</a>
<a href="#">Link Two</a>
<a href="#">Link Three</a>
<a href="#" class="button">Sign In &rsaquo;</a>

</div>

</div>
</div>

<div id="feature_home"></div>

And my CSS is:

div#nav_wrapper{
    height: 110px;
    width: 100%;
    background: url('../img/nav_bg.png'), #293340;
    box-shadow:0 0 10px rgba(0,0,0,0.8);
    position: relative;
    z-index: 2;
    display: block;
}
div#nav_content{
    height: 110px;
    margin: auto;
}
div#feature_home{
    width: 100%;
    height: 500px;
    background: url('../img/feature_bg.png'), #55B5D4;  
    position: relative;
    z-index: 1;
    display: block;
}

Upvotes: 4

Views: 3938

Answers (3)

mddw
mddw

Reputation: 5580

That's the most curious bug I've encountered in a while.

Thing is, you use multiple background and it kills the shadow.

div#nav_wrapper{
  background: url('../img/nav_bg.png'), #293340;
  box-shadow:0 0 10px rgba(0,0,0,0.8);
}

See the comma between url(..) and #293340 ? That's two backgrounds. Useless in our case :

div#nav_wrapper{
  background: #293340 url('../img/nav_bg.png');
  box-shadow:0 0 10px rgba(0,0,0,0.8);
}

works fine and solve the problem.

I'll investigate the root cause and update if I find something.

BTW, not a prefix problem, box-shadow is unprefixed in most browsers: http://caniuse.com/#search=box-shadow

edit : and the culprit is... your png ! http://jsfiddle.net/ZNwN7/

Upvotes: 3

Ashok Kumar Gupta
Ashok Kumar Gupta

Reputation: 974

Here is what i did:

div#nav_wrapper {
height: 110px;
width: 100%;
background: url('../img/nav_bg.png');
box-shadow: 0 0 10px rgba(0,0,0,0.8);
position: relative;
z-index: 2;
display: block;
}

The problem what background attribute. Enjoy!

Upvotes: 0

Joren
Joren

Reputation: 3267

Try adding the -webkit-box-shadow property with the same contents since Chrome (also Safari) is a webkit browser. And for good measure, also use -moz-box-shadow to be sure Mozilla renders it right too:

div#nav_wrapper{
    ...
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.8);
    ...
}

Related: What is WebKit and how is it related to CSS?

Upvotes: 1

Related Questions