Checkboxes doesn't appear properly when using Chrome and zoom out to 75% or less. I'm also using AngularJS latest version. In FireFox and Internet Explorer they appear properly.
I tried to fix this problem with:
input[type=checkbox] {
-webkit-appearance:checkbox;
}
but this doesn't help.
Here how it looks like:
The checkboxes are custom and there is 1 span and inside 2 divs. Here is the code:
.ckeckmark {
display: inline-block;
width: 18px;
height: 18px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}`
.ckeckmark > .stem {
position: absolute;
width: 1px;
height: 11px;
background-color: #1C4A9E;
left: 8px;
top: 2px;
}
.ckeckmark > .kick {
position: absolute;
width: 5px;
height: 1px;
background-color: #1C4A9E;
left: 3px;
top: 12px;
}<span ng-class="{ckeckmark: resident}">
<div class="stem"></div>
<div class="kick"></div>
</span>.stem and .kick are 2 divs next to each other inside .checkmark span class.
After research i noticed that Google Chrome displays a web page OK at 100% zoom (and above) but when the zoom level is less than 100% (e.g. 90%) padding get changed. A moves from the right-hand-side of the screen to the left hand side. Any help/suggestions?