Mobile Safari - Eingabe caret scrollt nicht zusammen mit Überlauf-Scrolling: Touch

Question

Ich weiß, dass Mobile Safari keine Ereignisse auslösen wird, während in "momentum" (-webkit-overflow-scrolling: touch;) Scrollen. Dies ist jedoch nicht das Gleiche, da Safari das (blinkende) Caret eines Eingangs intern verarbeitet.

<div id="container"> 
    <input type="text" /> 
    <div class="filling"></div> 
</div> 

#container { 
    position: absolute; 
    top: 20px; 
    bottom: 20px; 
    width: 50%; 
    -webkit-overflow-scrolling: touch; 
    overflow-y: auto; 
    border: 1px solid black; 
} 

input { 
    margin-top: 60vh; 
} 

.filling { 
    height: 200vh; 
} 

Versuchen Sie, diese Geige auf dem Gerät (die Eingabe konzentrieren und blättern Sie dann): https://jsfiddle.net/gabrielmaldi/n5pgedzv

Das Problem tritt auch auf, wenn Sie den Finger gedrückt halten (dh nicht nur, wenn es Impulse geben und loslassen): die Caret kann nicht scrollen.

Offensichtlich möchte ich Überlaufscrollen nicht abstellen, wenn es keine Möglichkeit gibt, das Caret so zu korrigieren, dass es korrekt scrollt, wäre es in Ordnung, es zu verstecken.

Dank

Answer 1

Dies ist in der Tat ein WebKit Fehler und es scheint keine bekannte Problemumgehung zu sein.

@cvrebert filed die Bug:

• WebKit: https://bugs.webkit.org/show_bug.cgi?id=138201
• Apple-Radar: http://openradar.appspot.com/18819624

Answer 2

nur eine Abhilfe, die ich gefunden wurde - auf Ereignis-Scrolling, wenn der Eingang mit Typ Text zu überprüfen fokussiert, setzen Sie den Fokus auf ein anderes Element (z. B. auf die Schaltfläche). Als Ergebnis werden virtuelle Tastatur und Cursor verschwinden. Diese Lösung ist nicht perfekt, aber sie sieht nicht so schrecklich aus wie mit den Cursorn oben auf dem Formular. Beispiel:

$(".scrollContainer").scroll(function() { 
    var selected = $("input[type='text']:focus"); 
    if (selected.length > 0) { 
     $('#someButton').focus(); 
    } 
} 

Answer 3

hatte das gleiche Problem, mein Update wurde Änderung zwischen

-webkit-overflow-scrolling: touch

und

-webkit-overflow-scrolling: auto 

, wenn i/Unschärfe Fokus auf Eingänge

Answer 4

Ich verbrachte eine Menge Zeit, um herauszufinden, und nein Ich habe Erfolg mit den anderen hier genannten Ideen.

Eine Sache, die ich bemerkte, ist, dass, obwohl der Cursor außerhalb der Eingabe schwebte, sobald Sie auf der Bildschirmtastatur zu tippen beginnen, kehrt der Cursor in die richtige Position zurück.

Dies gab mir die Idee - vielleicht könnte ich mit JS-Code den Wert der Eingabe ändern und dann schnell wieder auf den aktuellen Wert ändern. Vielleicht würde dies den Cursor veranlassen, sich selbst auszurichten, genau wie beim manuellen Tippen.

Ich habe es getestet und es hat funktioniert. So sieht der Code aus:

Answer 5

Sie können das Problem beheben, indem Sie die Auswahl entfernen und erneut festlegen. Mit jQuery hier ist das Javascript dazu.Ich fügen Sie den Event-Handler, wenn Editier-Modus eingeben:

 $(document).on('scroll.inline-edit', function(event) { 
      var selection = window.getSelection(); 
      if (selection.rangeCount) { 
       var range = selection.getRangeAt(0); 
       selection.removeAllRanges(); 
       selection.addRange(range); 
      } 
     }); 

Wenn ich den Bearbeitungsmodus beenden ich den Event-Handler entfernen:

 $(document).off('scroll.inline-edit'); 

Dies wird wahrscheinlich auch funktionieren, wenn der Event-Handler immer aktiviert ist.

Answer 6

Ich benutze jQuery.animate, um das Fenster zu scrollen und ich bin mir nicht sicher, ob dies funktioniert, wenn Sie nicht jQuery.animate verwenden, aber es hat für mich funktioniert. Ich trigge nur die "Unschärfe" -Handler auf dem Element an, die nicht tatsächlich dazu führen, dass das Element den Fokus verliert, es löst nur die Handler aus, als ob sie auf natürliche Weise durch Benutzerinteraktion ausgelöst worden wären. Es scheint:

$content.animate(
    { 
     scrollTop: $(this).data('originalTop') 
    }, 
    { 
     duration: 100, 
     easing: 'swing', 
     always: function(){ 
      var $t = $(this); 
      $t.trigger('blur'); 
     } 
    } 
); 

Durch andere Seltsamkeit mit iOS Ich habe das Element Offset() Top-Wert als originalTop wenn meine Form Lasten zu speichern.. $ content ist einfach ein scrollbares div mit meinem Formular - zB: $ ('div # content').

Answer 7

Dies scheint noch webkit Formen in iOS mit -webkit-overflow-scrolling:touch zu plagen, auch in iOS 11. Basierend auf den Antworten oben, und da es ein input oder textearea Element für die caret deplatziert nimmt Fokussierung zu erscheinen, hier ist meine eigenen Ansatz „Korrektur“, denn es

$('input').on("focus", function(){ 
    var scrollTopVal = $(elementSelector).scrollTop(); 
    $(elementSelector).scrollTop(scrollTopVal + 1); 
    $(elementSelector).scrollTop(scrollTopVal); 
}) 

wo elementSelector Punkte auf dem Behälterelement für die Eingabeelemente.

Answer 8

Es ist in der Tat ein Fehler auf neu iOS 11.Ich freigegeben löste die Ausgabe auf modal durch die CSS zu ändern:

.modal { 
    position:fixed; 
    overflow-y: scroll; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 0; 
    z-index: 99; 
} 

body { 
    height: 100%; 
    width:100%; 
    overflow: hidden; 
    position:fixed; 
} 

Answer 9

Dies war eine Weile her und ich denke, es ist am IOS11 fixiert. x, natürlich müssen wir noch ältere Versionen unterstützen, die obigen Vorschläge gaben mir einen Hinweis, aber keiner von ihnen hat mein Setup funktioniert. Ich habe onFocus verwendet, um eine verzögerte Funktion auszulösen, die ein Char zum aktuellen fokussierten Feld hinzufügt/löscht. Ich benutze einen flachen angularJS/iOS-Hybrid.

auf meine HTML-Seite

... setting up my form 
<div ng-repeat="item in curReading.items" > 
     <label>{{item.lbl}}</label> 
     <input type="text" 
     ng-model="item.value" 
     class="form-control" 
     onFocus="if(tweak4IOS == 1) setTimeout(pirouette_4_IOS, 1000);" 
      placeholder="Enter Title" 
      /> 
    </div> 

auf meinem JS Seite der entsprechende Code ist

function pirouette_4_IOS() 
{ 
    try 
    { 

    document.activeElement.value += 'x'; 
    document.activeElement.value = document.activeElement.value.slice(0,-1); 
    } 
    catch(err) 
    { 
    alert(err.message); 
    } 
    finally 
    { 
    tweak4IOS = 0; 
    } 
} // --- end of pirouette_4_IOS--- 
... 
var tweak4IOS = 0; // init the flag 

schließlich im Obj-C habe ich die var in der Tastatur Pop

- (void)keyboardDidShow:(NSNotification *)sender { 
CGRect frame = [sender.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue]; 

homeWeb.frame = CGRectMake(homeWeb.frame.origin.x, homeWeb.frame.origin.y, 
          homeWeb.frame.size.width , homeWeb.frame.size.height - frame.size.height ); 

self.pinBottom2.constant = frame.origin.y; 

// set the JS var so it is done only when keyboard pops initially 
[homeWeb stringByEvaluatingJavaScriptFromString:@"tweak4IOS=1;"];