Chrome에서 박스 섀도우가 사라짐

Chrome에서 브라우저를 새로 고침하거나 inspect 요소를 열면 탐색 바의 상자 그림자가 사라지고 간단히 표시되지 않습니다. 이것은 IE에서 발생하지 않습니다. 그것을 되 찾는 유일한 방법은 열심히 새로 고치는 것입니다. 어떤 아이디어?Chrome에서 박스 섀도우가 사라짐

웹 사이트 URL :

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

그리고 내 CSS는 다음과 같습니다 : http://tomwilson.pw/files/design/

내 HTML은

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

출처

2013-11-02 Tom Wilson

합니다.

여러 배경을 사용하면 그림자가 생깁니다.

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

url (..)과 # 293340 사이의 쉼표를 참조 하시겠습니까? 두 가지 배경이 있습니다. 우리의 경우 쓸모없는 :

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

잘 작동하고 문제를 해결하십시오.

내가 뭔가를 찾으면 근본 원인을 조사하고 업데이트 할 것입니다.

은 BTW,하지 접두사 문제, 상자 그림자는 대부분의 브라우저에서 접두어가된다 http://caniuse.com/#search=box-shadow

편집 : 그리고 범인은 ... 당신의 PNG입니다! 여기 http://jsfiddle.net/ZNwN7/

출처

2013-11-02 14:41:03 mddw

그냥 이것을 발견했습니다. 이것은 접두사 문제가 아니라 문제입니다. –

그것은 나에게도 흥미로웠다. 내 모든 시간에 나는 결코 이상한 것을 보지 못했다. 나는 그 여분의 배경을 제거 할 것이다. 그것은 어쨌든 거기에 있지 않아야합니다 : P –

그것은 일했습니다 - 고마워요! :) –

시도 같은 내용으로 -webkit-box-shadow 속성을 추가 이후 크롬 (또한 사파리) 웹킷 브라우저입니다. 그리고 좋은 측정을 위해, 또한 모질라를 잘 작성도 그것을 렌더링해야하는 -moz-box-shadow를 사용

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

관련 : 나는 한 동안 만난 가장 호기심 버그 What is WebKit and how is it related to CSS?

출처

2013-11-02 14:32:16 Joren

나는 - webkit-과 -moz- 둘 다 제거했습니다. 왜냐하면 그들은 단순히 필요하지 않았기 때문에 차이를 만들지 않았기 때문입니다. –

내가 무슨 짓을 :

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

문제 어떤 배경 속성. 즐겨!

출처

2013-11-02 14:50:13

Chrome에서 박스 섀도우가 사라짐

답변

관련 문제