Box Shadow disappearing on Chrome

Question

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;
}

mddw · Accepted Answer · 2013-11-02T14:55:17.307

3

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/

edited Nov 02 '13 at 14:55

answered Nov 02 '13 at 14:41

mddw

5,570
1
30
32

Just found this out as well. This is the problem, not a prefix problem. – Bram Vanroy Nov 02 '13 at 14:44
It intrigued me too, in all my time I have never come across something as strange. I'll remove that extra background; it shouldn't be there anyway :P – Tom Wilson Nov 02 '13 at 14:45

score 1 · Answer 2 · edited May 23 '17 at 12:29

1

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?

edited May 23 '17 at 12:29

Community

1
1

answered Nov 02 '13 at 14:32

Joren

3,068
25
44

I removed both -webkit- and -moz- because they simply weren't needed and didn't make a difference :) – Tom Wilson Nov 02 '13 at 14:44

score 0 · Answer 3 · answered Nov 02 '13 at 14:50

0

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!

answered Nov 02 '13 at 14:50

Ashok Kumar Gupta

984
7
9

Box Shadow disappearing on Chrome

3 Answers3