ionic-framework - 离子输入点击进入文本奇怪的行为

Question

当我在其中单击时，我看到我的离子输入字段的一些非常奇怪的行为。我已经将它（不知道为什么）精确定位到父 div 中的 padding-top。我还注意到，如果我将文本缩减为 p 中的几个单词。关于为什么会发生这种情况或我该如何解决的任何想法？

。主要的

.main {
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 100px; // IF I REMOVE THIS, IT IS NORMAL

  &.no-nav {
    padding-top: 0px;
  }
  &.no-content {
    :before {
      content: '';
      position: absolute;
      height: 1px;
      width: calc(100% - 48px);
      border-bottom: 1px solid $surface-03;
      top: 96px;
      left: 24px;
    }
  }
  &.top-nav {
    padding-top: 24px;
  }
}

模板代码

<ion-content>
  <div class="main">
    <ion-card>
      <ion-card-content>
        <p>a bunch of text here that seems to push the input box in click down, if i only put a few words here it doesn't behave  like this which is odd</p>
        <form [formGroup]="" novalidate>
          <ion-item>
            <ion-input
              formControlName=""
              required
              inputmode="text"
              placeholder="Click in me"
            ></ion-input>
            <ion-icon class="edit-icon"></ion-icon>
        </ion-item>
        </form>
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>

这是行为

标签： ionic-frameworksassionic4