Ionic-framework: [ionicV4]ion-input，has white rectangle

[woodstream]

"@ionic/angular": "^4.0.0-beta.3"；
Test html using ion-input like this：

```

Label1 Label2 Label3 Label4 Label5 Floating Label Fixed Label Stacked Label

````

When click the <input> element, before the third one is normal，but after it，there will show a white rectangle，and the style will be added “pointer-events: none” and "transform"

[mhartington]

Hi there! How can I recreate this or what steps do I need to take?
I so far have not been able to recreate this issue. Could you please provide a sample project and post it to github?
Thanks!

[woodstream]

Well, you can clone this project: https://github.com/woodstream/bug-temp, the steps are those:
1.First，just crete a new blank project by cli:
ionic start findBug blank --type=angular

2.Second，modify the ion-content like this:

<ion-content padding>
  <div style="background-color: lightblue">
    <ion-item>
      <ion-label>Label1</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Label2</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Label3</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Label4</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Label5</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Label6</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Floating Label</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="fixed">Fixed Label</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="stacked">Stacked Label</ion-label>
      <ion-input></ion-input>
    </ion-item>
  </div>
</ion-content>

3.Third，click the ion-input one after one, when click after the third,it will show a rectangle like this:
my-img

anyother has the same problem:
img

[mhartington]

Perfect, thanks for the imgs! I can reproduce this now.

[hghammoud]

If you disabled the scrollAssist for IonicModule, the input clone does not get created and the flickering/white rectangle doesnt show.

This issue is related to calculation of the styles and position of the cloned input.

[carstenbaumhoegger]

Is there any ETA for a fix?

[aaronbach]

I also experience this behavior in almost every ion-input.
Do anyone have at least a workaround?
I have tried to set opacity: 0 to the overlapping input, but since Ionic 4 is using the Shadow-Dom, I cannot access this properties, but through CSS4 variables.

[sean-perkins]

The issue appears to be related to the native-input class styling not being applied to the cloned input, since the stylesheet is in the shadow dom.

@aaronbach

As a workaround you can style that tag directly (globally). This styling is close:

.cloned-input input {
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      outline: 0;
      background: transparent;
}

There just seems to be a pixel shift for inline label/inputs. The offsetTop seems inaccurate for those. Setting it to zero in those cases works, but is not applicable to floating labels.

[aaronbach]

Thanks @sean-perkins, it seems to do the trick! It is not perfect, but a lot better than before!

[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.