Pixelated Checkbox on my Phone

ionic-v1
1

Hi,

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()">
           </label>
           Push Nachrichten
        </div>

      </div>
    </ion-content>
  </ion-tab>

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

Do you have any idea what could be the cause?

2

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.

.scroll-content{
  padding-top:1px;
}
3

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