IOS 11 hat Probleme mit Eingängen in einem festen Behälter more here, spezifisch mit IOS 11 auf Fokus + die Tastatur-Cursor falsch ausgerichtet ist mit dem Eingang:IOS 11 fester Eingang bug + Jitter auf scroll
I habe ein Element .rn-drawer, das am oberen Rand der Seite befestigt werden sollte, während der Rest des Seiteninhalts scrollbar ist. Das feste Element enthält eine Eingabe.
.rn-drawer {
position: fixed;
transition: all 0.25s ease-in-out;
display: flex;
height: 260px;
}
Durch einfaches die folgende .iOS-fix an die Mutter/Stammcontainer Anwendung kann ich die Verlagerung meines Eingang Tastatur lösen.
.iOS-fix {
position: fixed; // causes jitter on scroll, but resolves fixed input alignment bug
/*position: sticky; // no jitter, but doesn't resolve fixed input alignment bug*/
/*transform: translate3d(0, 0, 0); // no jitter + resolves fixed input alignment, BUT loses fixed position on children (like .rn-drawer)*/
overflow-y: scroll;
height: 100%;
width: 100%;
}
aber es gibt eine wirklich schlechte Jitter/Stottern auf blättern, die nach einigen Recherchen Ich glaube, dass eine Lösung für diese GPU-Beschleunigung in der CSS zwingt durch eine transformation Anwendung.
Ok, das löst diesen Jitter und die festen Eingabe-Alignment-Ausgabe aber jetzt postion:fixed; auf .rn-drawer nicht mehr gilt; Als Transformationen ändern sich das Koordinatensystem für Kinderelemente (und damit ist meine Schublade nicht fixiert).
position: sticky; stoppt den Jitter, aber das gleiche Problem mit Eingabefehlausrichtung.
Gibt es eine praktikable Lösung, die den Input Alignment Bug behebt, aber auch erlaubt, dass mein Eingabebehälter fest ist und Jitter auf Scroll nicht verursacht?
Danke.