Ripple effect - border radius issue - css

Question

I have made the following animation:
Fiddle
If you have a big retina display (on small mac retina it's also bugged) - see that it looks pretty good, but if you take it to a non-retina display, it looks kinda blurry and rectangle-d instead of round cornered.
If you don't have retina display (or mac laptop) - you can use devtools and slow down the animations to 10% and see that it behaves correctly when slowed down, but on normal speed it looks different.
Update Problem appears to be mainly in Chrome, FF works well.
Brevity CSS:
.container {
width: 700px;
height: 128px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
cursor: pointer;
.ripple-container {
width: 100%;
height: 100%;
background-color: #F5B30C;
position: relative;
overflow: hidden;
}
.ripple {
position: absolute;
background-color: blue;
top: 0;
right: 0;
height: 3px;
width: 3px;
border-radius: 50%;
transition: transform 1s;
&.rippler-active {
transition: transform 0.5s;
transform: scale(500);
}
}
}

Answer 1

Instead of scaling from 1 to 500 (which creates all sort of underground evil bugs)...
Scale from 0 to (say) 3, but than instead of setting the initial size to 0 (or 3px) you need to set to some huge size like 1400px.
A ripple of 1400px * 3 scale = means it can scale up to 4200px which is I think more than enough for any purpose:
var el = document.querySelector('.container');
var ripple = document.querySelector('.ripple');
el.addEventListener('click', function() {
ripple.classList.toggle("ripple-active")
});
.container {
height: 128px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
cursor: pointer;
}
.ripple-container {
width: 100%;
height: 100%;
background-color: #F5B30C;
position: relative;
overflow: hidden;
}
.ripple {
position: absolute;
background-color: #3f3fd8;
top: 0;
right: 0;
height: 1400px;
width: 1400px;
/* Notice the size!! */
margin: -700px -700px auto auto;
/* and set here the desired offset */
border-radius: 50%;
transition: transform 2s;
transform: scale(0);
}
.ripple.ripple-active {
transition: transform 2s;
transform: scale(3); /* 1400 * 3 !!! yey */
}
<div class="container">
<div class="ripple-container">
<div class="ripple"></div>
</div>
</div>