iOS 使用-webkit-overflow-scrolling: touch 时文本区域文本隐藏
iOS textarea text hidden when using -webkit-overflow-scrolling: touch
我又一次来到这里，因为我已经用尽了对这个主题的研究。我有一个非常简单的设置，带有非常简单的标记，但行为非常奇怪。
该行为与 (Firefox and Angular: Textarea placeholder doesn't appear until first focus) 极为相似，但我是在不同的环境中遇到的。
考虑带有只读文本区域的片段。这带来了糟糕的评论列表，其中 2-3 条适合屏幕，然后必须滚动更多 已加载 评论。
<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 设备我得到以下行为：
可见的评论已经在文本区域中正常显示。当我向下滚动阅读更多评论时，它们的文本区域是空的但是如果我点击文本区域然后文本出现。
滚动后，评论框为空，直到 iOS 中的 "tapped"。
就是这样，没有与此标记相关的复杂 CSS，也没有奇怪的服务器加载问题。当这个区域加载时，它会带来所有的评论。
我想指出的是，这是一个大型移动应用程序，具有更复杂的 markup/functionality，在浏览器上运行良好，并且可以完美地转换为 Android 和 iOS移动应用程序。
我在上面发布的第一个 link 让我认为在 ng-touch 处理移动客户端上的文本区域焦点时存在一些奇怪的错误。
有什么想法吗？我不想为文本输入转储文本区域，但我快到了那个时候。
此问题是由使用以下内容的容器中的文本区域元素触发的：
-webkit-overflow-scrolling: touch
在其父容器中。
删除 class 解决了 'initially hidden text not loading' 的问题，但失去了所需的惯性滚动 UX。
添加
-webkit-transform: translateZ(0px)
我受影响的 textarea 元素的样式解决了我的问题。
在我的特殊情况下，我认为我不会招致令人望而却步的性能损失，因为我尚未滚动到的隐藏元素不会加载丰富的内容 (videos/animations/etc)，这会对移动设备上的 VRAM 造成负担设备。我基本上是在利用由此触发的额外渲染上下文（硬件辅助），这使我的文本正常渲染，从而绕过了 iOS BUG。
有关 translateZ（及其近亲 translate3d(0,0,0)）的重要信息
http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
似乎在使用时：
-webkit-overflow-scrolling: touch;
iOS 将表单元素放置在奇怪的 z-index 位置，它在视觉上隐藏但仍可点击（知道元素在哪里：可以键入文本、按下按钮等）。在 iOS 纠正此错误（在 Safari 和 iOS 上的 Chrome 中都存在）之前的 hack-fix 是在所有带有 [= 的元素上显式设置较低的 z-index 13=]设置.
例如，如果该页面根本不使用 z-index，则使用：
z-index: -1;
-webkit-transform: translateZ(-1);
-webkit-overflow-scrolling: touch;
将解决问题。
我又一次来到这里，因为我已经用尽了对这个主题的研究。我有一个非常简单的设置，带有非常简单的标记，但行为非常奇怪。
该行为与 (Firefox and Angular: Textarea placeholder doesn't appear until first focus) 极为相似，但我是在不同的环境中遇到的。
考虑带有只读文本区域的片段。这带来了糟糕的评论列表，其中 2-3 条适合屏幕，然后必须滚动更多 已加载 评论。
<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 设备我得到以下行为：
可见的评论已经在文本区域中正常显示。当我向下滚动阅读更多评论时，它们的文本区域是空的但是如果我点击文本区域然后文本出现。
滚动后，评论框为空，直到 iOS 中的 "tapped"。
就是这样，没有与此标记相关的复杂 CSS，也没有奇怪的服务器加载问题。当这个区域加载时，它会带来所有的评论。
我想指出的是，这是一个大型移动应用程序，具有更复杂的 markup/functionality，在浏览器上运行良好，并且可以完美地转换为 Android 和 iOS移动应用程序。
我在上面发布的第一个 link 让我认为在 ng-touch 处理移动客户端上的文本区域焦点时存在一些奇怪的错误。
有什么想法吗？我不想为文本输入转储文本区域，但我快到了那个时候。
此问题是由使用以下内容的容器中的文本区域元素触发的：
-webkit-overflow-scrolling: touch
在其父容器中。
删除 class 解决了 'initially hidden text not loading' 的问题，但失去了所需的惯性滚动 UX。
添加
-webkit-transform: translateZ(0px)
我受影响的 textarea 元素的样式解决了我的问题。
在我的特殊情况下，我认为我不会招致令人望而却步的性能损失，因为我尚未滚动到的隐藏元素不会加载丰富的内容 (videos/animations/etc)，这会对移动设备上的 VRAM 造成负担设备。我基本上是在利用由此触发的额外渲染上下文（硬件辅助），这使我的文本正常渲染，从而绕过了 iOS BUG。
有关 translateZ（及其近亲 translate3d(0,0,0)）的重要信息 http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
似乎在使用时：
-webkit-overflow-scrolling: touch;
iOS 将表单元素放置在奇怪的 z-index 位置，它在视觉上隐藏但仍可点击（知道元素在哪里：可以键入文本、按下按钮等）。在 iOS 纠正此错误（在 Safari 和 iOS 上的 Chrome 中都存在）之前的 hack-fix 是在所有带有 [= 的元素上显式设置较低的 z-index 13=]设置.
例如，如果该页面根本不使用 z-index，则使用：
z-index: -1;
-webkit-transform: translateZ(-1);
-webkit-overflow-scrolling: touch;
将解决问题。