Webkit Border Radius Animation Clipping

Я анимирую открытый лайтбокс (ничего особенного или сумасшедшего), и у меня проблемы с радиусом границы в Chrome, Opera и Safari. Все другие браузеры (включая мобильные, которые я тестировал) работают нормально. По сути, после нажатия DIV лайтбокс анимируется от одного радиуса границы к другому при открытии. Содержимое внутри DIV выливается во время анимации (отсечение). В других браузерах с этим проблем нет, и, судя по проведенному мной исследованию, Webkit не учитывает overflow:hidden.

Вот код JS для открытия лайтбокса (событие внутреннего клика):

$('#SC_Lightbox').css({
borderTopLeftRadius:'100px',
borderTopRightRadius:'100px',
borderBottomLeftRadius:'100px',
borderBottomRightRadius:'100px',
WebkitBorderTopLeftRadius:'100px',
WebkitBorderTopRightRadius:'100px',
WebkitBorderBottomLeftRadius:'100px',
WebkitBorderBottomRightRadius:'100px',
MozBorderRadius:'10px',
borderRadius:'10px'})
.animate({
'opacity':1,'width':'300px','height':'500px','top':'120px','left':'200px',
borderTopLeftRadius:'10px',
borderTopRightRadius:'10px',
borderBottomLeftRadius:'10px',
borderBottomRightRadius:'10px',
WebkitBorderTopLeftRadius:'10px',
WebkitBorderTopRightRadius:'10px',
WebkitBorderBottomLeftRadius:'10px',
WebkitBorderBottomRightRadius:'10px',
MozBorderRadius:'10px',
borderRadius:'10px'
},{duration:500,queue:false});

Вот CSS лайтбокса (все, что применяется после загрузки):

#SC_Lightbox {
    background-color: #333333;
    border-radius: 12px 12px 12px 12px;
    display: block;
    height: 350px;
    left: 500px;
    opacity: 1;
    overflow: hidden;
    top: 20px;
    width: 500px;
    position: absolute;
    z-index: 99999999;
    line-height: 1;}

Другая странная вещь заключается в том, что у проблемных браузеров также есть проблема с анимацией/рендерингом WebkitBorderBottomRightRadius???

Я также попробовал другое предложение форума и добавил:

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 

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

У кого-нибудь есть идеи? Спасибо!