IOS textarea text hidden when using -webkit-overflow-scrolling: touch

Question

I am here again because I have exhausted my research on this issue. I have a very simple setup with very simple markup and still very weird behavior.

The behavior is terribly similar ( Firefox and Angular: Placeholder in Textarea does not appear until the first focus ), but I experience this in a different environment.

Consider a fragment with a read-only text area. This leads to a poor comment list, where 2-3 fit on the screen before scrolling through a few 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 fine when launching the application in the browser (chrome, safari, etc.), but as soon as I create the application using PhoneGap and launch it on the ipad device, I get the following behavior:

Submitted comments are already displayed well in text areas. When I scroll down, read more comments, their text fields are empty, but if I touch the text field, then the text will appear.

After scrolling, the comment fields remain empty until "iOS" is used.

No, there is no complex CSS associated with this markup, and no strange problems with loading the server. When this area loads, it brings with it all the comments.

I would like to note that this is a great mobile application with much more complex markup / functionality, which works fine in the browser and translates well for both Android and iOS mobile applications.

The first link that I posted so far leads me to think that there is some strange error in processing ng-touch text messages for mobile clients.

Any ideas? I would really like to reset the text boxes for text input, but I'm almost at this point.

Answer 1

This problem is triggered by the textarea element inside the container using:

 -webkit-overflow-scrolling: touch 

in the parent container.

Removing the class solves the problem with “initially hidden text, not loadable”, but losing the desired inertial scrolling of the UX.

Adding

 -webkit-transform: translateZ(0px) 

in the style of my affected elements, textarea solves my problem.

In my particular case, I do not believe that I will be subject to excessive performance penalties, since my hidden elements, which I have not yet scrolled, will not load rich content (videos / animations / etc.) that will impose VRAM on mobile device. I mainly use the extra rendering context (hardware) caused by this, which makes my text rendered in normal mode and thus bypasses iOS BUG.

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