Overflow:hidden and border-radius not working with css-animation - css

Question

I'm having trouble with what I believe is a bug in Safari, every other Browser shows it correctly.
http://codepen.io/anon/pen/pvavVa
html looks like this:
<div id="background"></div>
<div id="midground"><div id="baggy"></div></div>
CSS like this:
#keyframes ex4 { /* CSS3 */
0% { -webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px); }
100% { -webkit-transform: translate(0px, -5000px);
-moz-transform: translate(0px, -5000px);
-ms-transform: translate(0px, -5000px);
-o-transform: translate(0px, -5000px);
transform: translate(0px, -5000px); } }
#-moz-keyframes ex4 { /* CSS3 */
0% { -webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px); }
100% { -webkit-transform: translate(0px, -5000px);
-moz-transform: translate(0px, -5000px);
-ms-transform: translate(0px, -5000px);
-o-transform: translate(0px, -5000px);
transform: translate(0px, -5000px); } }
#-webkit-keyframes ex4 { /* CSS3 */
0% { -webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px); }
100% { -webkit-transform: translate(0px, 5000px);
-moz-transform: translate(0px, -5000px);
-ms-transform: translate(0px, -5000px);
-o-transform: translate(0px, -5000px);
transform: translate(0px, -5000px); } }
}
body {
font: 10px/2 "Lucida Grande", Helvetica, Sans-Serif;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
#background {
background: url("http://epicstudios.de/blackwhite/bg2.jpg") fixed repeat;
-webkit-background-size: 100vw auto;
-moz-background-size: 100vw auto;
-o-background-size: 100vw auto;
background-size: 100vw auto;
position: absolute;
background-position:center top;
height:400vh;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 100
;z-index: 199;
animation: ex4 150s infinite; /* CSS3 */
-moz-animation: ex4 150s infinite; /* Firefox */
-webkit-animation: ex4 150s infinite; /* Webkit */
}
#midground {
width:240px;
height:240px;
position:absolute;
left:0px; right:0px;
top:0; bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
overflow:auto;
border-radius:500px;
z-index:200;
overflow:hidden;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
#midground:hover {
width:350px;
height:350px;
position:absolute;
left:0px; right:0px;
top:0px; bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
overflow:hidden;
border-radius:0px;
z-index:200;
}
#baggy { background: url(http://epicstudios.de/blackwhite /bg_neg.jpg) repeat fixed;
background-position:center top; -webkit-background-size: 100vw auto;
-moz-background-size: 100vw auto;
-o-background-size: 100vw auto;
background-size: 100vw auto;
background-repeat: repeat-y;
height:600vh;
position:absolute;
left:0; right:0;
top:0; bottom:0;
margin:auto;
overflow:hidden; z-index: 201;animation: ex4 150s infinite; /* CSS3 */
-moz-animation: ex4 150s infinite; /* Firefox */
-webkit-animation: ex4 150s infinite; /* Webkit */
}
The div in the center there should be a Circle, but safari shows a square. In this circle there's a div, that is larger than the circle and is moving because of a css-animation. As soon as I apply this animation to that div, the overflow:hidden and/or the border-radius:50% of the circle-div above it stop working and it appears as a square in safari.
I hope that's clear. I can't use JavaScript for the animation because I tried that before, and it worked, but it proved to be too difficult to process on most computers and the site started lagging and stuttering heavily.
http://codepen.io/anon/pen/pvavVa