Ionic-framework: bug: Multiple Floating Label Inputs are Very Buggy

[tlaverdure]

Short description of the problem:

On an ios device with a long form that makes ion-content long enough to scroll. Focus on a input with floating labels and the input bounces. This does not occur while testing the app in chrome or safari browsers.

Also experiencing weird behavior while scrolling and focused in an input.

What behavior are you expecting?

Normal floating label behavior after the interface has scrolled to the focused input. I think the css transform while scrolling is causing issues.

Steps to reproduce:

1. Add 10 items to a list with a floating label.
2. Focus on the elements one after the other from top to bottom.
3. Run in ios emulator or on ios device.

<ion-header>
  <ion-navbar>
    <ion-title>Title</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>

    <ion-item>
      <ion-label floating>Label</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Label</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Label</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Label</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Label</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Label</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Label</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Label</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Label</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Label</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Label</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Label</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Label</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Label</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>

  </ion-list>
</ion-content>

Which Ionic Version? 1.x or 2.x
2.X

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.1.1
Gulp version:  CLI version 1.2.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.5
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.1.0
Xcode version: Xcode 7.3.1 Build version 7D1014

[tlaverdure]

Here is a test while inspecting the ios simulator/safari and making one of the input elements blue. Notice how it gets pushed down while focus & scroll.

[bbearche]

I am also experiencing this issue on my ios device during testing. Everything works fine in browser, but on an emulator or device it causes issues.

[brandyscarney]

Thanks for the issue. This looks like a duplicate of https://github.com/driftyco/ionic/issues/6667, but I was able to reproduce it in mobile Safari.

[tlaverdure]

Great! Thank you and looking forward to the next beta release.

[mpaland]

I had this issue, too. While experimenting with scrolling list input on Android, I tried the ionicBootstrap config options scrollAssist and autoFocusAssist.
Setting scrollAssist to true caused your effect and is, as far as I remember, set by default in iOS platform.
See my forum post
There was a good talk from @tlancina about keyboard issues and he basically advises to avoid using long lists - which is unfortunately not always possible.
For me the whole keyboard show/hide/scroll to input/focus input issue is still unsolved (on Android). Hoping that it gets some love by the ionic team at some time...

[rachelxi]

I got it reproducible when you focused on input and try to drag it down, it will show 2-line flashing and that only occurs on IOS. When trying to debug in develop tools on Mac with my iphone, I did see a new class called 'cloned-input' is added to the input and that class is from the app.ios stylesheet from ionic. It is only applicable to floating label so I removed that to avoid the two-line thing, but still bit flashing on input

[rachelxi]

What was causing the 2-line thing: app.ios.css:
.text-input.cloned-input {
position: relative;
top: 0;
pointer-events: none; }

.item-input:not(.item-label-floating) .text-input.cloned-active {
display: none; }

What I did to fix in my css file:
.item-input .text-input.cloned-active {
display: none !important; }

Hope it helps.

[brunoosilva]

+1

[jayeshanandani]

Still having this issue.

[brunoosilva]

This works for me:

.input-cover { position: static!important; }

[sarahtully]

+1, @brunoosilva temporary fix resolved the issue for me. Thanks

[brandyscarney]

I'm actually not able to reproduce this anymore using the latest nightly. Could you try installing that and let me know if you still have the issue? npm install --save ionic-angular@nightly

[brandyscarney]

I confirmed that this has been fixed in the nightly, so it will be in the rc.4 release. Thanks!