iOS - 文本在键入时不显示，但在滚动时显示

Question

我正在创建一个 ionic 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;
}

就是这样，我不会在这门课中修改 typescript 中的 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(我认为)
• 滚动后文本确实显示，您可以看到光标移动
• 当输入 g、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);
}

无论您的内容有多大，这都不会滚动。这是相对于 body 标签而言的。