Need to Fix Fuzzy pixels around CSS3 Loader - css

Question

I'm making a css3 loader animation and I'm having trouble making it really crisp. Because I'm using two circles essentially, there is a slight bump in the edge because of the two overlaying circles.
Any idea on how to fix this?
http://codepen.io/anon/pen/qdylp
<div class="loader loader-2"></div>
<style type="text/css">
body {
max-width: 1000px;
margin: 100px auto 0;
padding-left: 6.25%;
}
.loader {
position: relative;
display: inline-block;
margin: 0 12.5% 100px;
width: 58px;
height: 58px;
border: 2px solid #0cf;
border-radius:50%;
box-sizing: border-box;
animation: spin 4.5s infinite linear;
}
.loader::before,
.loader::after {
left: -2px;
top: -2px;
display: none;
position: absolute;
content: '';
width: inherit;
height: inherit;
border: inherit;
border-radius: inherit;
box-sizing: border-box;
}
/*
* LOADER 2
*/
.loader-2 {
border-top-color: transparent;
background-clip: content-box;
background-clip: border-box;
}
.loader-2::after {
display: block;
left: -2px;
top: -2px;
border: inherit;
transform: rotate(300deg);
background-clip: content-box;
background-clip: border-box;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-bottom: 2px solid transparent;
}
.stopped {
animation: spin 1004.5s infinite linear;
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
</style>

Answer 1

transforms will often make the appearance of an object blurry due to the way the browser manipulates the element. It doesn't look bad in Chrome, but all browsers will render it a little differently.
One way to potentially help the blurriness is to scale up, rotate, then scale back down like so:
transform: scale(4) rotate(0deg) scale(0.25);
Check out the adjusted demo to see if that's any crisper: http://codepen.io/shshaw/pen/yiHts
EDIT:
If the background color is known, then you can just have the psuedo element cover part of the circle which will render a little better: http://codepen.io/shshaw/pen/pzFtG
With an SVG, you can mask, but browser support isn't great: http://caniuse.com/#search=mask Here's a walkthrough to see if that might be what you need: http://thenittygritty.co/css-masking
Based on our conversation, the best option may be using clip on the psuedo elements with a slight rotation on one: http://codepen.io/shshaw/pen/JeBHk