首页 文章

使用-webkit-overflow-scrolling时触摸的iOS textarea文本：touch

提问于
浏览 次
11

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

这种行为与（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设备上运行它，我会得到以下行为：

The comments visible already show fine in the textareas. When I scroll down do read more comments, their textareas are empty BUT if I tap the textarea then the text appears.

Already visible textareas showing their text

滚动后，注释框为空，直到在iOS中“点击” .

也就是说，没有与此标记相关的复杂CSS，也没有奇怪的服务器加载问题 . 加载此区域时，会带来所有注释 .

我想指出，这是一款大型移动应用，具有更复杂的标记/功能，可在浏览器上正常工作，并完美转换为Android和iOS移动应用 .

我发布的第一个链接让我认为ng-touch处理textarea的重点放在移动客户端上有一些奇怪的错误 .

有任何想法吗？我讨厌转储textareas文本输入，但我几乎就在那时 .

ios angularjs cordova textarea phonegap-build

2 回答

  • 24

    此问题由容器中的textarea元素触发，使用：

    -webkit-overflow-scrolling: touch

    在其父容器中 .

    删除类解决了“最初隐藏的文本未加载”但丢失了所需的惯性滚动UX的问题 .

    添加

    -webkit-transform: translateZ(0px)

    我受影响的textarea元素的风格解决了我的问题 .

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

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

    回复于
  • 0

    似乎在使用时：

    -webkit-overflow-scrolling: touch;

    iOS将表单元素放置在一个奇怪的 z-index 位置，它在视觉上隐藏但仍然可以点击（知道元素的位置：可以键入文本，按下按钮等） . 直到iOS纠正此错误（在iOS上的Safari和Chrome中都存在）的黑客修复是在 -webkit-overflow-scrolling: touch 设置的所有元素上明确设置较低的 z-index .

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

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

    将纠正这个问题 .

    回复于

相关问题