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

我正在创建一个ionic 2移动应用程序

在Android和Windows上，此问题不会发生

在我的页面上，我有两个输入。标题为1，说明为1

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

在用户键入内容后，它仍然为空，但随后甚至会滚动一点（同时仍然关注输入），文本就会出现

我的html：（完整）

就是这样，在这个类中，我不会从我的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

• 已经重新安装了爱奥尼亚插件键盘->2.2.1和2.2.4版（我想）
• 滚动后会显示文本，您可以看到光标移动
• 当输入g、q、p等时，你甚至可以看到超出正常线的部分（例如，q和p显示该线），就像有东西只是在我正在输入的精确线的顶部悬停一样

---

因此，由于某种原因，在添加

变换后：translateZ（0px）在我的文本区域和输入字段上。在添加了一个“假”诱导卷轴后，它实际上不会滚动：


无论你的内容有多大，它都不会滚动。这与body标签有关。
不确定哪一个解决了问题，但我保留了这两个，因为在iOS上进行测试对我来说非常困难。我在iOS safari应用程序facebook浏览器上遇到了相同的问题，带有文本区域输入（默认的移动iOS safari浏览器也可能存在问题）。第一个字母将出现，但在执行滚动之前，第一个字母之后不会出现字母。我用transform:translateZ（0px）修复了它在文本区域，所以我不知道滚动有多必要。希望这也能帮助其他有类似问题的人。
changedInput(event:any) { 
    // fake scroll, no effect       
    window.scrollBy(0, 2);

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

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

}

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