Ionic-framework: Placeholder & Scroll flicker on input focus

[ghost]

Ionic version: (check one with "x")

• [ ] 1.x
• [x] 2.x

I'm submitting a ... (check one with "x")

• [x] bug report
• [ ] feature request
• [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
On iOS.
When focusing an ion-input if the view needs to scroll up, the placeholder and input jank (visual glitches). The cursor also blinks various times in rapid succession until focus is complete.

Important: This only happens on the device itself (since the Keyboard appears) and cannot be reproduced in a desktop environment.

Expected behavior:
A normal focus of an input.

Steps to reproduce:
Simply using the blank project:

• ionic start InputScrollJank blank --v2
• cd InputScrollJank
• Edit ./src/pages/home/home.html to include an ion-list with enough items to trigger a scroll when the keyboard appears (my example code is below).
• ionic run ios --device
• tap on a lower ion-input in the list (so the webview scrolls)
• Your placeholder will jump around (2-3+ times) as well as some cursor glitches, etc.

Related code:

./src/pages/home/home.html

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

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>

  <ion-list>
    <ion-item>
      <ion-label>Item</ion-label>
      <ion-input text-right placeholder="placeholder"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Item</ion-label>
      <ion-input text-right placeholder="placeholder"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Item</ion-label>
      <ion-input text-right placeholder="placeholder"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Item</ion-label>
      <ion-input text-right placeholder="placeholder"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Item</ion-label>
      <ion-input text-right placeholder="placeholder"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Item</ion-label>
      <ion-input text-right placeholder="placeholder"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Item</ion-label>
      <ion-input text-right placeholder="placeholder"></ion-input>
    </ion-item>
  </ion-list>
</ion-content>

Other information:
Here's a screen recording. The more complex the page, the more the placeholder and input jump around.
https://dl.dropboxusercontent.com/u/17542144/InputScrollJank.mov

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.3.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[jgw96]

Hello, thanks for using Ionic! I am going to close this issue as a duplicate of https://github.com/driftyco/ionic/issues/10257.

[ghost]

@jgw96 I did have a look at that issue beforehand: I understand these issues are similar, but having a look at the gif in issue #10257 I believe these are slightly different problems.

The webview and screen bounce / jump around in that issue #10257 but the screen is fine in my example, only the input itself and its placeholder are what bounces and flickers.

If they come down to the same problem, then I'm happy for this issue to be closed, but if you could just take a closer look that would be great. Thanks.

[skill83]

I agree, i have a similar issue with no item-right or item-left

[DigiGoon]

The issue @jgw96 mentioned is not similar to this one. I'm also getting the same exact issue.

[Emptyfruit]

Can confirm. Same issue.
iOS 10.3.3
cli packages: (/Users/Emptyfruit/dev/organizer/node_modules)

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 6.5.0

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.1.2 browser 4.1.0 ios 4.3.1
Ionic Framework    : ionic-angular 3.6.0

System:

Android SDK Tools : 25.2.5
ios-deploy        : 1.9.1 
ios-sim           : 5.0.13 
Node              : v7.9.0
npm               : 4.2.0 
OS                : OS X El Capitan
Xcode             : Xcode 8.0 Build version 8A218a

[richardshergold]

@jgw96 I think this needs to be re-opened. I get this issue now using the latest version of the framework (running on an iPhone SE - iOS 11.2.2). It seems to be an issue with the ion-label because when I remove that, the wobbling on the input field goes away. Changing the attribute on the ion-label from fixed to floating also removes the wobbling. One other point - I think the issue only occurs if there is a scroll of the screen as the field receives focus.

[thomasfw]

@jgw96 Same issue here (also #9756)

[thomasfw]

I've found a fix for this. Turns out that Ionic clones focused input elements on scroll in order to squash some bugs that can occur during scrolling.

Looks like this is only iOS related. For whatever reason the cloned input doesn't inherit or respect the combined right-hand margin of the parent ion-item (.item-inner has an 8px right margin), and ion-input (.input-ios has an 8px right margin), which amounts to 16px ($content-padding).

The effect of this is only obvious when the input is aligned to the right (although that's got to be fairly common? ..if you're combining Ionics right-aligned select input with a standard input in the same form without matching their alignment then god help you). You can fix it temporarily by applying the appropriate offset to the right of the cloned input element.. and then hope that one day this gets fixed for real...

.input-ios.cloned-input[text-right] {
    padding-right: $content-padding !important;
}

@jgw96 please add this to your internal bug tracker for v4 🙏 (The worst part is that this happens every time you focus a right-aligned input on iOS - the screen scrolls to the input automatically, so you get that horrible shift every single time.)

[mlynch]

Will track for v4, currently looking at some other scroll flickering issues and nailing keyboard is a priority

[SmirnovM91]

I've found solution that works for me.
.cloned-input {
margin-left: 0 !important;
}

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.