使用-webkit-overflow-scrolling时触摸的iOS textarea文本：touch [英] iOS textarea text hidden when using -webkit-overflow-scrolling: touch

问题描述

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

行为与（

Once again I am here because I have exhausted my research on the subject. I have a very simple setup with very simple markup and yet a very strange behavior.

The behavior is eerily similar to (Firefox and Angular: Textarea placeholder doesn't appear until first focus) but I am experiencing it in a different environment.

Consider the snippet with a readonly text area. This brings bad a list of comments, where 2-3 fit on the screen before having to scroll for some more already loaded comments.

    <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>

This works great when running the application on the browser (chrome, safari, etc), but once I build the application using PhoneGap and run it on the ipad device I get the following behavior:

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.

After scrolling, the Comment boxes are empty until "tapped" in iOS.

That is it, there is no complicated CSS related to this markup, and no weird server loading issues. When this area loads it brings all the comments with it.

I'd like to point out that this is a large mobile app with much more sophisticated markup/functionality that works fine on the browser and translates perfectly to both Android and iOS mobile apps.

The first link I posted upthere leads me to think that there is some weird bug in ng-touch handling textarea focus on mobile clients.

Any ideas? I'd hate to dump textareas for text inputs, but I am almost at that point.

解决方案

This issue is triggered by the textarea element within a container using:

-webkit-overflow-scrolling: touch 

in its parent container.

Removing the class solves the problem with the 'initially hidden text not loading' but losing desired inertia scrolling UX.

Adding

-webkit-transform: translateZ(0px) 

to the style of my affected textarea elements solves my problem.

In my particular case I dont believe I will incur in prohibitive performance penalties since my hidden elements that I am yet to scroll to wouldnt be loading rich content (videos/animations/etc) that would tax the VRAM on the mobile device. I am basically taking advantage of the additional rendering context (hardware assisted) being triggered by this, which makes my text render normally, and thus bypassing an iOS BUG.

Great information on translateZ (and its close cousin translate3d(0,0,0)) http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/

这篇关于使用-webkit-overflow-scrolling时触摸的iOS textarea文本：touch的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！