iOS textarea Text versteckt bei der Verwendung von -webkit-overflow-scrolling: Touch

Question

Noch einmal bin ich hier, weil ich meine Forschung zu diesem Thema erschöpft habe. Ich habe ein sehr einfaches Setup mit einem sehr einfachen Markup und dennoch einem sehr seltsamen Verhalten.

Das Verhalten ist unheimlich ähnlich (Firefox and Angular: Textarea placeholder doesn't appear until first focus), aber ich erlebe es in einer anderen Umgebung.

Betrachten Sie das Snippet mit einem schreibgeschützten Textbereich. Dies bringt eine schlechte Liste von Kommentaren, wo 2-3 auf den Bildschirm passen, bevor Sie für weitere bereits geladene Kommentare scrollen müssen.

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

Dies funktioniert gut, wenn im Browser die Anwendung ausgeführt wird (Chrome, Safari, etc.), aber sobald ich bauen die Anwendung PhoneGap verwenden und es auf dem iPad Gerät betreibe ich das folgende Verhalten erhalten:

Die sichtbaren Kommentare sind bereits in den Textareas gut sichtbar. Wenn ich nach unten scrolle, lese mehr Kommentare, ihre Textfelder sind leer, aber wenn ich auf das Textfeld klicke, erscheint der Text.

Nach dem Scrollen sind die Kommentarfelder leer, bis in iOS "abgehört" werden.

Das ist es, es gibt keine komplizierte CSS im Zusammenhang mit diesem Markup, und keine seltsamen Probleme beim Laden von Servern. Wenn dieser Bereich geladen wird, werden alle Kommentare angezeigt.

Ich möchte darauf hinweisen, dass dies eine große mobile App mit viel ausgeklügelter Markup/Funktionalität ist, die gut auf den Browser funktioniert und perfekt auf Android und iOS Mobile Apps übersetzt.

Der erste Link, den ich nach oben gebracht habe, lässt mich glauben, dass es einen seltsamen Fehler in der Handhabung von Textarea auf mobile Clients gibt.

Irgendwelche Ideen? Ich würde es hassen, Textareas für Texteingaben auszugeben, aber ich bin fast an diesem Punkt.

Answer 1

Dieses Problem wird durch das Textfeld Element in einem Container ausgelöst werden:

-webkit-overflow-scrolling: touch 

in seinem übergeordneten Container.

Durch das Entfernen der Klasse wird das Problem behoben, dass der ursprünglich verborgene Text nicht geladen wird, aber die gewünschte Trägheit verloren geht, wenn UX gescrollt wird.

-webkit-transform: translateZ(0px) 

den Stil meiner betroffenen TextArea- Elemente löst mein Problem Hinzufügen.

In meinem speziellen Fall glaube ich nicht, dass ich in prohibitive Leistungsstrafen auftreten werde, da meine versteckten Elemente, die ich noch scrollen soll, nicht reichen Inhalt (Videos/Animationen/etc) laden würde, die den VRAM auf dem mobilen Gerät besteuern würden . Ich nutze grundsätzlich den zusätzlichen Rendering-Kontext (hardwaregestützt), der dadurch ausgelöst wird, wodurch mein Text normal gerendert wird und somit ein iOS BUG umgangen wird.

Große Informationen über translateZ (und seinen nahen Verwandten translate3d (0,0,0)) http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/