iOS - Text doesnt appear when typing but does when scrolling

Question

I'm creating an ionic 2 mobile application.

On Android and Windows, this issue doesn't occur.

On my page I have 2 inputs. 1 for the title and 1 for the description.

When I tap these and start typing, everything works fine. But when I first scroll for even a little and then tap my input and start typing, Only the first letter is shown and the rest remains blank.

After the user has typed something and it remains blank but then scrolls even a little (while still having focus on input), the text appears.

My html: (full)

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

So here I have already tried setting the z-index over 9000 but the issue remained.

I also tried adding an onkeyup event where I tried to 'fake' a scroll without result.

My ts code (the relevant, juicy bits):

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

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

That's it really, I don't modify DOM elements from my typescript in this class.

And my scss thought it might be a css issue so I'll add it as well

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

}

important notes

• The onkeyup isn't in the original code, I tried this as a solution but failed.
• The original code also used an ion-textarea instead of textarea.
• Already reinstalled ionic-plugin-keyboard -> version 2.2.1 & 2.2.4 (I think)
• The text does show after scrolling and you can see the cursor move
• When typing a g, q, p etc. you can even see the parts that exceed the normal line (q and p shows the line for example) like something is just hovering on top of the exact line I'm typing

Answer 1

So for some reason, after adding transform: translateZ(0px); on my text-area and input field. And after adding a 'fake' induced scroll which doesn't actually scroll:

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

This doesn't scroll, no matter how big your content is. This is relative to the body tag.