Коробка тени исчезает на Chrome

В Chrome, если я обновляю свой браузер или открываю элемент проверки, тень окна на панели навигации исчезает и просто не отображается. Это не происходит в IE. Единственный способ вернуть его - это жесткое обновление. Есть идеи? URLКоробка тени исчезает на Chrome

Сайт: http://tomwilson.pw/files/design/

Мой HTML является:

<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 является:

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 свойство с тем же содержанием, так как Chrome (и Safari) это браузер webkit. И для хорошей меры, а также использовать -moz-box-shadow, чтобы быть уверенными, Mozilla делает это право тоже:

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

ответ

Смежные вопросы