firefox rounded div get cropped while transition with overflow hidden to parent - html

Question

I am just doing a simple scale on a rounded div, see the fiddle.
It works well on Chrome and Safari, but in Firefox a part of the rounded div get cropped during the transition and get back to normal after that.
It can be fixed:
with a non transparent background on the parent.
without the overflow: hidden of the parent.
without the rotation on the parent.
But i can't use this fixes for what I am making here.
All this stuff works in Chrome and Safari, so if anyone knows why firefox act like this i would be pleased to know.
Thanks
Here is the css :
.petale-wrapper
{
width: 200px;
height: 100px;
position: relative;
transform: rotate(-20deg);
overflow: hidden;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
}
.petale
{
position: absolute;
left: 50px;
top: 50px;
width: 150px;
height: 75px;
border-radius: 75px 75px 0 0;
background-color: cyan;
transition: transform 0.5s;
-webit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transform: scale(1) rotate(60deg);
-webkit-transform: scale(1) rotate(60deg);
-moz-transform: scale(1) rotate(60deg);
}
.petale:hover
{
transform: scale(1.2) rotate(60deg);
-webkit-transform: scale(1.2) rotate(60deg);
-moz-transform: scale(1.2) rotate(60deg);
}
Here is the html:
<div class="petale-wrapper">
<div class="petale">
</div>
</div>