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); 
} 

這不滾動，不管你的內容有多大。這是相對於身體標記。