1
아이폰 OS (11)는 구체적으로는 포커스 + 키보드 커서의 아이폰 OS (11)와, 고정 용기 more here 내부 입력 문제를 갖는 것은 입력 오정렬 페이지 내용의 나머지 부분을 스크롤 할 수있는 반면에 페이지 상단에 고정해야하는 요소 .rn-drawer이 있어야합니다. 고정 요소는 입력을 포함합니다. 단순히 부모/루트 컨테이너에 다음 .iOS-fix을 적용하여아이폰 OS (11), 고정 입력 버그 + 지터
.rn-drawer {
position: fixed;
transition: all 0.25s ease-in-out;
display: flex;
height: 260px;
}
나는 키보드에 내 입력의 정렬 불량을 해결할 수 있습니다.
.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%;
}
하지만 몇 가지 조사 후 나는 이것에 대한 해결책이 transformation을 적용하여 CSS에서 GPU 가속을 강요하고 있다고 생각 스크롤에 정말 나쁜 지터/더듬이있다.
이 문제는이 지터를 해결하고 고정 입력 정렬 문제를 해결하지만 이제는 .rn-drawer의 postion:fixed;이 더 이상 적용되지 않습니다. 변형은 자식 요소의 좌표계를 변경하므로 (따라서 내 서랍은 고정되지 않습니다).
position: sticky;은 지터를 중지하지만 입력 정렬 오류와 동일한 문제가 발생합니다.
입력 정렬 버그를 해결할 수있는 솔루션이 있습니까? 또한 입력 컨테이너가 고정되어 스크롤 할 때 지터가 발생하지 않도록 할 수 있습니까?
감사합니다.