iOS 11 has issues with inputs inside a fixed container more here, specifically with iOS 11 on focus + the keyboard cursor is misaligned to the input:
I have an element .rn-drawer
that ought to be fixed to the top of page, while the rest of the page content is scrollable. The fixed element contains an input.
.rn-drawer {
position: fixed;
transition: all 0.25s ease-in-out;
display: flex;
height: 260px;
}
By simply applying the following .iOS-fix
to the parent/root container I can resolve the misalignment of my input to keyboard.
.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%;
}
BUT there is a really bad jitter/stutter on scroll, which after some research I believe that a solution for this is forcing GPU acceleration in the CSS by applying a transformation.
Ok, this solves this jitter and the fixed input alignments issue BUT now the postion:fixed;
on .rn-drawer
no longer applies; as transformations change the coordinate system for children elements (and thus my drawer is not fixed).
position: sticky;
stops the jitter, but same issue with input misalignment.
Is there any viable solution that will solve the input alignment bug, but also allow my input container to be fixed AND not cause any jitter on scroll?
Thanks.