How to fix overflow hidden not working with border radius and CSS animation

Question

I'm targeting mobile browsers for this issue and using jQuery.transit . Outer circle created using overflow:hidden and big border-radius. Inner box animates using CSS transitions to cover outer box. During animation, border-radius of the outerbox does NOT render. See this example...

http://jsfiddle.net/P7Dkz/2/

$('#light').transition({
    y: '0rem',
    delay: 1000
}, 1000);

Any ideas how to fix this?

Answer 1

Here is the solution

in jQuery use top instead 'y', like this

$(function(){ 
    $('#light').transition({
        top: '0rem',
        delay: 1000
    }, 1000);
});

and CSS remove transform and use top property like this

#light {
    background-color:#92bcd5;
    top:10rem;
    /*transform: translate(0, 10rem);
    -webkit-transform: translate(0, 10rem); /* Safari and Chrome */
} 

Here is Demo