Item-toggle in a list showing strange bug


#1

Hello in my angularjs/ionic application I have a list of toggle-items.

Well somehow if I switch some of the toggle-items I get display bugs like in the picture below. This behavior happens only with Android not iOS.

Well this only happens when the white entries was former a activated toggle item. It also seems to be random wich of the active toggle items get white.

My code for this toggle-item list looks like here:

`

<ion-list>
  <div>
    <ion-item class="item-stable">
      <i class="icon ion-chevron-up"></i>
      &nbsp;
      Test
    </ion-item>
    <ion-item class="item-accordion item-toggle">

      <i class="icon ion-clock"></i>

      blabla

      <label class="toggle toggle-calm">
        <input type="checkbox">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>

    </ion-item>

    <label >test</label>

    <ion-item class="item-accordion item-toggle">

      <i class="icon ion-clock"></i>

      blabla

      <label class="toggle toggle-calm">
        <input type="checkbox">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>

    </ion-item>

    <ion-item class="item-accordion item-toggle">

      <i class="icon ion-clock"></i>

      blabla

      <label class="toggle toggle-calm">
        <input type="checkbox">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>

    </ion-item>

    <ion-item class="item-accordion item-toggle">

      <i class="icon ion-clock"></i>

      blabla

      <label class="toggle toggle-calm">
        <input type="checkbox">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>

    </ion-item>

    <ion-item class="item-accordion item-toggle">

      <i class="icon ion-clock"></i>

      blabla

      <label class="toggle toggle-calm">
        <input type="checkbox">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>

    </ion-item>

    <ion-item class="item-accordion item-toggle">

      <i class="icon ion-clock"></i>

      blabla

      <label class="toggle toggle-calm">
        <input type="checkbox">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>

    </ion-item>
  </div>
</ion-list>
`

Any suggestions?


#2

@kingalione I’m having a similar issue, but actually with the ion-toggle directive. Have you found the cause and/or a solution?