Erased border with the scale - html

Question

There stylized input, but the zoom in / out, they change size, it seems as if the border is lost, I can't understand what went wrong, thanks in advance.
My codepen
For example, Chrome - zoom 75%
<div class="checkbox-remember-me">
<input type="radio" name="gender" id="male" checked/>
<label for="male"></label>
</div>Male

Answer 1

This happens because you use an absolute positioned label to cover its parent partially to make it appear to have a border, and when the page is zoomed, depending on how the browser calculate its position, it jumps a pixel up and down, hence sometimes fully aligns with its parent's edge.
Update your css like this, and use a border instead, and it will work fine.
.checkbox-remember-me {
display: inline-block;
width: 24px;
height: 24px;
position: relative;
border: 1px solid #666;
margin-left: 34px;
margin-right: 10px;
}
.checkbox-remember-me label {
width: 22px;
height: 22px;
cursor: pointer;
position: absolute;
background: #eee;
margin: 1px;
}
.checkbox-remember-me {
display: inline-block;
width: 24px;
height: 24px;
position: relative;
border: 1px solid #666;
margin-left: 34px;
margin-right: 10px;
}
.checkbox-remember-me label {
width: 22px;
height: 22px;
cursor: pointer;
position: absolute;
background: #eee;
margin: 1px;
}
.checkbox-remember-me label:after {
content: '';
width: 15px;
height: 10px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid red;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
transform: rotate(-45deg);
}
.checkbox-remember-me label:hover:after {
opacity: 0.3;
}
input[type=radio] {
display: none;
}
input[type=radio]:checked + label:after {
opacity: 1;
}
<h4>Gender</h4>
<div class="checkbox-remember-me">
<input type="radio" name="gender" id="male" checked/>
<label for="male"></label>
</div>Male
<div class="checkbox-remember-me">
<input type="radio" name="gender" id="female" />
<label for="female"></label>
</div>Female
Updated codepen: https://codepen.io/anon/pen/LRLrNO