Border-Radius Crazy CSS disappeareance в Webkit с Facebook Page Plugin

Question

Я нашел очень странный ошибка сегодня при разработке нового сайта, я действительно не знаю, почему, черт возьми, это происходит, но я думаю, кто-то может это знать.

Я сделал меню навигации, прикрепленное к верхней правой части страницы, внутри нее, большой div, сделанный из большого радиуса границы.

Он работал очень хорошо и нормально, пока я не добавил в правую панель плагин facebook.
Когда нижняя часть этого div переходит по заголовку страницы в плагине, радиус границы исчезает. Он остается квадратным div, пока он там, возвращается к раунду, если я прокручиваю страницу и остаюсь кругом, пока он не «коснется» этой очень конкретной части плагина этой страницы.

Я действительно не имеют понятия о том, почему, вот некоторый код для лучшего понимания:

.nav { 
    position:fixed; 
    width:100%; 
    text-align:right; 
    z-index:9999; 
} 
.face { 
    position:absolute; 
    width: 20%; 
    background:#F93; 
    top:5px; 
    right:10px; 
    border-radius:9999px; 
    overflow:hidden; 
} 

.face:before { 
    content: ""; 
    display: block; 
    padding-top: 95%; 

} 
.face a img { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    width:100% 
} 
.menu{ 
    display:inline-block; 
    background:#FFF; 
    padding:1em; 
    width:50%; 
    text-align:left; 
    border-top-left-radius: 100px; 
    border-bottom-left-radius: 100px; 
    margin-top:3%; 

} 

.menu a { 
    padding:0 0.5em; 
    border-radius:4em; 
} 

А также:

<div class="nav"> 
<div class="menu"> 
<a href="#">menu</a><a href="#">menu</a><a href="#">menu</a><a href="#">menu</a> 
</div><br/> 
<div class="name"> 
<h2>name</h2> 
</div> 
<div class="face"> 
<a href="#"><img src="i/image.png"/></a> 
</div> 
</div> 

Кстати, это, кажется, происходит только на WebKit браузеров, на firefox это выглядит очень нормально, даже не тестировалось в Internet Explorer.

EDIT: Просто протестирована на Internet Explorer и УДИВИТЕЛЬНО она работает очень хорошо, это сейчас очень и очень странно

EDIT2: Некоторые скриншоты для еще большего уточнения:

Перед коснувшись название:

После того, как попадает на тот очень специфическом месте:

Далее вниз:

Anytime это за титул, это не круглая, в другом месте, это хорошо.

EDIT3: Я узнал, что было другое место, где была ошибка; У меня есть ползунок jquery на странице; У меня был эффект непрозрачности на зависании на некоторых элементах управления, когда эти непрозрачности были анимированы, он воспроизводил проблему исчезающего пограничного радиуса, а затем сам возвращался к нормальной жизни; Удаление правила CSS непрозрачности из нейтрального состояния сделало остановку ошибки, когда она зависала над слайдером, но она продолжает падать, пока этот div находится над плагином facebook.

Answer 1

Хорошо, я нашел исправление этой проблемы, что я могу думать только я не думал раньше потому что я слишком устал.^^ '

Прежде всего, я узнал, что эта ошибка была еще более странной, чем я думал, вспоминая, как непрозрачность на другом элементе, казалось, повлияла на нее, я попытался изменить непрозрачность изображения, тогда я узнал, что div, который содержал его, был, по сути, все еще круглым.

Несмотря на то, что изображение было отрезано overflow:hidden;, оно не сокращалось граничным радиусом родительского div.

Я исправил его, поставив рамку на изображение тоже, так что теперь она круглая, даже когда над этим плагином, проблема исчезла.

Надеюсь, что когда-нибудь это обнаружено некоторыми разработчиками веб-сайтов и выявит и исправит эту ошибку, это было действительно странно.

Спасибо, Генри, за помощь тоже!

TL; DR

Фиксированный с помощью border-radius как на родительском DIV и изображения.

Answer 2

Возможно, здесь происходит больше из-за плагина Facebook, но это звучит например, проблема не в учете правил Webkit CSS. Если это проблема, я удивляюсь, что Firefox не дает вам проблем. Стандартный способ стиль закругленные углы с поддержкой кросс-браузер, чтобы дать border-radius, то -moz-border-radius и -webkit-border-radius:

.menu { 
    ... 
    border-radius: 100px 0px 0px 100px; 
    -moz-border-radius: 100px 0px 0px 100px; 
    -webkit-border-radius: 100px 0px 0px 100px; 
    ... 
} 
.menu a { 
    ... 
    border-radius: 4em; 
    -moz-border-radius: 4em; 
    -webkit-border-radius: 4em; 
}