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

i found very weird bug today while developing new site, don't know why in hell it's happening, think might know.

i made navigation menu fixed top-right part of page, within it, big div made round lot of border-radius.

it working fine , normal untill added right bar facebook page plugin.
when bottom of div goes on title of page in plugin, border-radius disappears. stays square div while it's there, goes round if scroll page , stays round until it's "touching" specific part of page plugin.

i don't have clue why, here's code 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 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 {     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 way, seems happen on webkit browsers, on firefox looks normal, didn't test in internet explorer.

edit: tested on internet explorer , surprisingly did work well, very weird

edit2: screenshots more clarification:

before touching title:

after gets on specific spot:

further down:

anytime it's on title it's not round, elsewhere it's fine.

edit3: found out there place bug happening; have jquery slider on page; had opacity effect on hover on controls, when these opacity being animated, reproduced disappearing border-radius problem, , went normal itself; removing opacity css rule neutral state made bug stop happening while hovering slider, keeps hapenning while div on facebook plugin

there may more going on here because of facebook plugin, sounds problem of not taking account webkit css rules. if that's problem, i'm surprised firefox isn't giving trouble. standard way style rounded corners cross-browser support give 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 {     ...     border-radius: 4em;     -moz-border-radius: 4em;     -webkit-border-radius: 4em; }