Background Color Fill Animation Ends in Offset - html

Question

I'm trying to "fill" a circle when a user clicks on it. The main issue is that when the animation ends, it's offset on the top by just a little bit. I've tried to add a margin-top: -1px to it but it's then offset on the bottom!
I'm open to any suggestion to make the animation smoother but my main question is: Why is the end result offset from the top a tiny bit and how can I fix it?
#searchOptions label {
display: inline-block;
cursor: pointer;
font-size: 14px;
text-transform: uppercase;
color: #000;
font-weight: 400;
margin-right: 40px;
}
#searchOptions label .circle {
display: inline-block;
position: relative;
border: 2px solid #000;
width: 15px;
height: 15px;
border-radius: 50%;
margin-right: 12px;
}
#searchOptions label .circle:before {
display: none;
position: absolute;
content: '';
background-color: #000;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
width: 2px;
height: 2px;
}
#searchOptions label .txt {
position: relative;
top: -3px;
}
#searchOptions input[type=radio] {
height: 0;
width: 0;
opacity: 0;
}
#searchOptions input[type=radio]:checked + label .circle:before {
display: block;
width: 100%;
height: 100%;
animation: fillRadio ease-in 1s;
}
#-webkit-keyframes fillRadio {
0% {
top: 50%;
transform: translateY(-50%);
width: 1%;
height: 1%;
}
100% {
top: 0%;
transform: translateY(0%);
width: 100%;
height: 100%;
}
}
<div id="searchOptions">
<input type="radio" name="searchType" value="option1" id="option1" />
<label for="option1"><span class="circle"></span> <span class="txt">Option 1</span>
</label>
<input type="radio" name="searchType" value="option2" id="option2" />
<label for="option2"><span class="circle"></span> <span class="txt">Option 2</span>
</label>
</div>
<!-- id="searchOptions" -->
Here's a JSFiddle if anyone would rather use that.

Answer 1

I believe that the problem comes from a dimensiion of 15px and top of 50% -> that gives a fractional size
I have changed the size to 16px, that is even:
#searchOptions label {
display: inline-block;
cursor: pointer;
font-size: 14px;
text-transform: uppercase;
color: #000;
font-weight: 400;
margin-right: 40px;
}
#searchOptions label .circle {
display: inline-block;
position: relative;
border: 2px solid #000;
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 12px;
}
#searchOptions label .circle:before {
display: none;
position: absolute;
content: '';
background-color: #000;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
width: 2px;
height: 2px;
}
#searchOptions label .txt {
position: relative;
top: -3px;
}
#searchOptions input[type=radio] {
height: 0;
width: 0;
opacity: 0;
}
#searchOptions input[type=radio]:checked + label .circle:before {
display: block;
width: 100%;
height: 100%;
animation: fillRadio ease-in 1s;
}
#-webkit-keyframes fillRadio {
0% {
top: 50%;
transform: translateY(-50%);
width: 1%;
height: 1%;
}
100% {
top: 0%;
transform: translateY(0%);
width: 100%;
height: 100%;
}
}
<div id="searchOptions">
<input type="radio" name="searchType" value="option1" id="option1" />
<label for="option1"><span class="circle"></span> <span class="txt">Option 1</span>
</label>
<input type="radio" name="searchType" value="option2" id="option2" />
<label for="option2"><span class="circle"></span> <span class="txt">Option 2</span>
</label>
</div>
<!-- id="searchOptions" -->