使用 -webkit-overflow-scrolling 时隐藏的 iOS textarea 文本：触摸答案

【问题标题】：iOS textarea text hidden when using -webkit-overflow-scrolling: touch使用 -webkit-overflow-scrolling 时隐藏的 iOS textarea 文本：触摸
【发布时间】：2015-04-28 02:25:33
【问题描述】：

我再次来到这里是因为我已经用尽了我对该主题的研究。我有一个非常简单的设置，带有非常简单的标记，但行为却非常奇怪。

这种行为与 (Firefox and Angular: Textarea placeholder doesn't appear until first focus) 非常相似，但我在不同的环境中体验它。

考虑带有只读文本区域的 sn-p。这带来了糟糕的 cmets 列表，其中 2-3 个适合屏幕，然后必须滚动查看更多已加载 cmets。

    <div class="row">
        <div class="col-xs-2 text-right font-sm-dark"
             style="height:20px; line-height:20px; font-weight:bold;">
            <label>Comment:</label>
        </div>
        <div class="col-xs-10 text-left font-sm">
            <div class="col-xs-12 text-left font-sm">
                <textarea style="text-align:left; width:100%; padding:0,0; line-height:normal; resize:none;"
                          rows="5"
                          ng-model="comment.Text"
                          readonly></textarea>
            </div>
         </div>
    </div>

这在浏览器（chrome、safari 等）上运行应用程序时效果很好，但是一旦我使用 PhoneGap 构建应用程序并在 ipad 设备上运行它，我就会得到以下行为：

可见的 cmets 已经在 textareas 中正常显示。当我向下滚动阅读更多 cmets 时，它们的 textarea 是空的，但是如果我点击 textarea，则会出现文本。

滚动后，评论框是空的，直到在 iOS 中“点击”。

就是这样，没有与此标记相关的复杂 CSS，也没有奇怪的服务器加载问题。当这个区域加载时，它会带来所有的 cmets。

我想指出，这是一个大型移动应用程序，具有更复杂的标记/功能，可以在浏览器上正常运行，并且可以完美地转换为 Android 和 iOS 移动应用程序。

我在上面发布的第一个链接让我认为 ng-touch 处理 textarea focus on mobile clients 时存在一些奇怪的错误。

有什么想法吗？我不想为文本输入转储文本区域，但我差不多到了这一点。

【问题讨论】：

终于发现有些人在谈论几乎相同的事情。这与惯性滚动问题有关。 stackoverflow.com/questions/8110580/…
不特定于 Angular 或 textareas，通过 React 和输入展示

标签： ios angularjs cordova textarea phonegap-build

【解决方案1】：

这个问题是由容器内的 textarea 元素触发的：

-webkit-overflow-scrolling: touch

在其父容器中。

删除类解决了“最初隐藏的文本未加载”但失去所需的惯性滚动用户体验的问题。

添加

-webkit-transform: translateZ(0px)

我受影响的 textarea 元素的样式解决了我的问题。

在我的特定情况下，我不相信我会招致令人望而却步的性能损失，因为我尚未滚动到的隐藏元素不会加载丰富的内容（视频/动画/等），这会对移动设备上的 VRAM 造成负担。我基本上利用了由此触发的附加渲染上下文（硬件辅助），这使我的文本正常渲染，从而绕过了 iOS BUG。

关于 translateZ（及其近亲 translate3d(0,0,0)）的重要信息 http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/

【讨论】：

我发现它是由输入上方的一堆图像触发的。我认为这只是一个渲染问题，渲染太多，并且 translateZ 激活了硬件加速。

【解决方案2】：

好像在使用的时候：

-webkit-overflow-scrolling: touch;

iOS 将表单元素放置在一个奇怪的z-index 位置，它在视觉上是隐藏的，但仍然可以点击（知道元素在哪里：可以输入文本、按下按钮等）。在 iOS 纠正此错误（iOS 上的 Safari 和 Chrome 中都存在）之前的 hack-fix 是在所有设置了-webkit-overflow-scrolling: touch 的元素上显式设置较低的z-index。

例如，如果页面根本不使用z-index，则使用：

z-index: -1; -webkit-transform: translateZ(-1); -webkit-overflow-scrolling: touch;

将纠正问题。

【讨论】：