Pixelated Checkbox on my Phone


I included a checkbox item in my app and it looks as it should when viewing the app in an emulator or in the browser. However when I install the app on my Galaxy S3 mini the checkbox looks somewhat pixelated (see Screenshot below). On other phones (tested on Nexus 4) it looks fine.

Here is the code I used for that tab:

<ion-tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="ion-ios7-gear-outline">
    <ion-content class="bg-white">
      <div class="list">

        <div class="item item-checkbox">
           <label class="checkbox checkbox-dark">
             <input type="checkbox" ng-model="pushNotification.checked" ng-change="pushNotificationChange()">
           Push Nachrichten


I did not modify any CSS. The Android on that phone is 4.2.

Do you have any idea what could be the cause?

Most likely an issue with the physical display, where it’s some odd pixel ration, like 1.5.

Try adding this css and see if it helps.


Hm I tried several variations of your suggestion and it does not seem to make a difference. However I put a range slider below that checkbox and the slider looks perfectly fine. Still no clue what messes the checkbox up. Looks like an anti-aliasing problem