使用-webkit-overflow-scrolling时触摸的iOStextarea文本:touch

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

行为类似于(Firefox和Angular:Textarea占位符直到第一次焦点才出现),但我在不同的环境中遇到它.

考虑具有只读文本区域的代码段.这会带来错误的评论列表,其中2-3个适合屏幕,然后必须滚动一些已经加载的评论.

    

        

            Comment:
        
        

            

                
            
         
    

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

可见的评论已经在textareas中显示得很好.当我向下滚动时,请阅读更多评论,他们的textareas是空的但是如果我点击textarea然后文本出现.

滚动后,注释框为空,直到在iOS中"点击".

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

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

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

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

此问题由容器中的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/