For some reason, I am experiencing an unusual issue in Windows Chrome specifically. The checkbox appears as 0px x 0px in the after selector. Even when I try to manually set the width and height, the problem persists.
https://i.sstatic.net/RdUCQ.png
In contrast, all other browsers display it like this:
https://i.sstatic.net/cWSFY.png
I would really appreciate any assistance with this matter.
<label class="checkbox ng-isolate-scope ng-valid" ng-model="result.selected">
<span class="checkbox-styled-container">
<input type="checkbox" class="checkbox-styled-inverted ng-valid ng-dirty ng-valid-parse ng-touched" ng-model="ngModel" style="">
<span></span>
</span>
</label>
.checkbox-styled:checked + span:after, .checkbox-styled-container input[type='checkbox']:checked + span:after {
content: '';
position: absolute;
width: 12px;
height: 7px;
top: 4px;
left: 3px;
border: 3px solid #fff;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}