Border-Radius Crazy CSS disappeareance in Webkit with Facebook Page Plugin

Question

I found a very weird bug today while developing a new site, I really don't know why in the hell it's happening, but I think someone might know.

I made a navigation menu fixed to the top-right part of the page, within it, a big div made round from a lot of border-radius.

It was working very fine and normal untill I added to the right bar a facebook page plugin.
When the bottom of that div goes over the title of the page in the plugin, the border-radius disappears. It stays a square div while it's there, goes back to round if I scroll the page and stays round until it's "touching" that very specific part of that page plugin.

I really don't have a clue about why, here's some code for better understanding:

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

And also:

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

By the way, it seems to happen only on webkit browsers, on firefox it looks very normal, didn't even test in internet explorer.

EDIT: Just tested on Internet Explorer and SURPRISINGLY it did work very well, this is now very very weird

EDIT2: Some Screenshots for even more clarification:

Before touching the title:

After it gets on that very specific spot:

Further down:

Anytime it's over the title it's not round, elsewhere it's fine.

EDIT3: I found out that there was another place the bug was happening; I have a jquery slider on the page; I had an Opacity effect on hover on some controls, when these opacity was being animated, it reproduced the disappearing border-radius problem, and then went back to normal by itself; Removing opacity CSS rule from the neutral state made the bug stop happening while hovering the slider, but it keeps hapenning while that div is over the facebook plugin

Answer 1

Ok, I found a fix for the problem, that I can only think I didn't thought before because I was too tired. ^^'

First of all, I found out that this bug was even weirder than I thought, thinking back how the opacity on another element seemed to affect it, I tried changing the image opacity, then, I found out that the div that contained it was in fact, still round.

Even though the image was being cut by the overflow:hidden; it wasn't being cut by the border-radius of the parent div.

I fixed it by putting border-radius on the image too, so now it is round even when over that plugin, the problem is gone now.

I hope someday this gets found by some webkit developers and the identify and fix that bug, it was really weird.

Thanks Henry for the help too!

TL;DR

Fixed by using border-radius on both parent div and image.

Answer 2

There may be more going on here because of the Facebook plugin, but it sounds like this is a problem of not taking into account Webkit CSS rules. If that's the problem, I'm surprised that Firefox isn't giving you trouble. The standard way to style rounded corners with cross-browser support is to give border-radius, then -moz-border-radius and -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;
}