iOS - 文字不会在输入时出现，但会在滚动时出现

Question

我正在创建离子2移动应用程序。

在Android和Windows上，不会出现此问题。

在我的页面上我有2个输入。标题为1，描述为1。

当我点击这些并开始输入时，一切正常。但是，当我第一次滚动一下，然后点击我的输入并开始输入时，只显示第一个字母，其余部分保持空白。

在用户输入了一些内容并保持空白后，即使有一点滚动（同时仍然关注输入），文本出现。

我的HTML：（已满）

<ion-content #content padding> 
     <img *ngIf="imageSrc" #image class="taken-image" [src]="sanitizer.bypassSecurityTrustUrl(imageSrc)"/> 

     <ion-list> 
      <ion-item> 
       <ion-label color="white-text" inline>Title</ion-label> 

       <!-- Issue #1 --> 
<!-- HERE --> <ion-input style="z-index: 9999999999999999999" [(ngModel)]="imageData.title" placholder="Enter a title" (onkeyup)="changedInput()"></ion-input> 
      </ion-item> 

      <ion-item class="item-no-padding"> 
       <button class="blue-button" outline ion-button block icon-left tappable (click)="selectCat()"><ion-icon name="arrow-dropdown"></ion-icon>Select Cats</button> 
       <div *ngIf="selectedCats"> 
        Selected Cat(s): 
        <ion-list> 
         <ion-item class="close-item" *ngFor="let spot of selectedCats"> 
          {{spot.value}} 
         </ion-item> 
        </ion-list> 
       </div> 
      </ion-item> 

      <ion-item class="item-no-padding"> 
       <button class="blue-button" outline ion-button block icon-left tappable (click)="selectCat1()"><ion-icon name="arrow-dropdown"></ion-icon>Select Cat1</button> 
       <div *ngIf="selectedCat1"> 
        Selected Cat1: 
        <ion-list> 
         <ion-item class="close-item" *ngFor= "let spot of selectedCat1"> 
          {{spot.value}} 
         </ion-item> 
        </ion-list> 
       </div> 
      </ion-item> 

      <ion-item class="item-no-padding"> 
       <!--<ion-textarea class="text-area" [(ngModel)]="description" placeholder="Enter a description (optional)" (onkeyup)="changedInput()" clearInput> 
       </ion-textarea> --> 


<!-- HERE --> <textarea style="z-index: 999999999999999999999" [(ngModel)]="description" placeholder="Enter a description" (onkeyup)="changedInput()"></textarea> 
      </ion-item> 


     </ion-list> 

     <div class="send-button-wrapper"> 
      <p class="send-button" (click)="send()"><span class="send-button-text">Send</span> &nbsp;&nbsp;&nbsp;<button ion-fab class="send-button" color="main-text"><ion-icon name="send"></ion-icon></button></p> 
     </div> 

     <white-leaves-background></white-leaves-background> 
</ion-content> 

所以在这里我已经尝试设置z-index超过9000，但问题仍然。

我也尝试添加一个onkeyup事件，我试图'假'滚动没有结果。

我ts代码（相关，多汁位）：

changedInput(event:any) { 
    // fake scroll, no effect  
    window.scrollBy(0, 2); 

    // setting description as a test 
    this.description = event.target.value; 
} 

这是真的，我不从我这个班打字稿修改DOM元素。

而且我scss认为这可能是一个CSS问题，所以我将它添加以及

.item-no-padding { 
    .item-inner { 
     padding-right: 0 !important; 
    } 
} 
.fab ion-icon { 
    font-size: 3.4rem; 
} 

.send-button-wrapper { 
    font-family: Quicksand-Bold; 
    margin-top: 25%; 
    text-align: right; 
} 

.send-button-text { 
    font-size: 3.4rem; 
    color: white; 
    margin-top: 10% 
} 

.send-button { 
    margin-top: -10%; 
    font-size: 20px; 
    float: right; 
} 

.close-item { 
    min-height: 3.4rem !important; 
    ion-label { 
     margin: 0 !important; 
    } 
} 

.taken-image { 
    width: 50%; 
    margin-left: 25%; 
} 

.text-area { 
    height: 80px; 
    resize: none; 
    border: 1px solid #cccccc; 
} 

::placeholder { 
    color: black !important; 
} 

image-edit{ 

    .app-background { 
     img { 
      filter: opacity(25%); 
     } 
    } 

    ion-label { 
     margin: 13px 0 13px 0 !important; 
    } 

    ion-input { 
     .button { 
      background-color: transparent; 
      color: white; 
      box-shadow: none; 
     } 
    } 

    .very-important-to-show { 
     opacity: 0; 
    } 

    .item-button { 
     padding: 0; 
     margin: 0; 
     height: 40px !important; 
     font-size: 14px !important; 
     width: 100%; 
     text-align: center !important; 
     color: white !important; 
     border: none !important; 
    } 

    .card, .item { 
     background-color: rgba(255,255,255,0) !important; 
    } 

} 

重要事项

• 的onkeyup是不是在原来的代码，我试图将其作为解决方案，但失败了。
• 原始代码还使用了ion-textarea而不是textarea。
• 已经重新安装ionic-plugin-keyboard - >版本2.2.1 & 2.2.4（我认为）
• 文本确实显示滚动后，你可以看到光标移动
• 打字的时候AG，Q，P等。你甚至可以看到超过正常线的部分（q和p显示例如行）喜欢的东西只是徘徊确切的顶线我打字

Answer 1

所以，出于某种原因，加上transform: translateZ(0px);后在我的文本区域和输入字段上。并增加了“假”引起的滚动它不后实际滚动：

<ion-content> ...... </ion-content>

import { Content } from 'ionic-angular'; 
import { ViewChild } from '@angular/core'; 

.... 

@ViewChild(Content) content: Content; 

.... 

changedInput() { 
    // scroll the content to the same place in 1ms 
    this.content.scrollTo(0, 0, 1); 
} 

这不滚动，不管你的内容有多大。这是相对于身体标记。