Ionic 2 text input flickers / jumps on focus


#1

I can’t figure out why this is happening.
This is in a new “blank” project ( ionic start testapp blank --v2 ). All you need to do to reproduce is run ionic emulate ios

As you can see, when each input is focused, the placeholders “flicker” or “jump around” randomly.

Is this a known issue? Or does anyone know how I can fix this?

Thanks.

Source Code

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h1>Input flicker test</h1>
  <ion-list no-lines>
    <!-- Name -->
    <ion-item>
      <ion-label item-left>Name</ion-label>
      <ion-input item-right class="right" placeholder="Enter name" clearOnEdit="true" clearInput [(ngModel)]="item.name"></ion-input>
    </ion-item>

    <!-- Description -->
    <ion-item>
      <ion-label item-left>Description</ion-label>
      <ion-input item-right class="right" clearInput placeholder="Enter description" [(ngModel)]="item.description"></ion-input>
    </ion-item>

    <!-- ... -->
  
  </ion-list>
</ion-content>

https://dl.dropboxusercontent.com/u/17542144/Flicker%20Demo/source.zip

Simulator Demo
https://dl.dropboxusercontent.com/u/17542144/Flicker%20Demo/flicker.mov


#2

Turns out it was because of the item-right attribute on the inputs. Using CSS to move them to the right worked a treat :thumbsup: