iOS11 Safari에서 텍스트 입력 커서가 어긋나는 문제

iOS11 Safari에서는 텍스트 입력 요소인 나 <textarea> 태그를 focus했을 때 커서가 어긋나는 문제가 있는 것 같습니다.



시뮬레이터에서도 재현

외형이 어긋나고 있을 뿐이라면 괜찮습니다만, 터치해 복사나 잘라내는 경우에 생각하도록 텍스트를 선택할 수 없는 것은 문제입니다.

반드시 발생하는 것은 아니며, 재현에는 분명히 조건이있는 것 같습니다.

"position : fixed"를 지정하는 요소 아래에 입력 요소가 있어야합니다

입력 항목에 focus가 닿으면 소프트웨어 키보드가 항목의 위치를 ​​밀어 올립니다.

이 두 점을 충족하면 발생하는 것 같습니다.

여러가지 시행착오해 보았더니, 이하의 방법으로 어긋나지 않고 정상적으로 동작했습니다.

소프트웨어 키보드에 밀어 올릴 수 없는 페이지 상단에 고정 요소를 놓습니다.

UI를 기존으로부터 크게 바꾸게 되기 때문에, 그다지 현실적이지 않을 것 같습니다.

position: fixed 를 사용하지 않고, position: absolute 등으로 대용한다

fixed의 거동을 재현하고 싶은 경우는, JavaScript로 동적으로 style를 지정해도 좋을까 생각합니다.

자신은 후자로 대응했습니다.
처음에는 fixed를 사용하지 않으려는 어려움이 있습니다.

빨리 버전 업으로 수정되었으면 합니다.

참고 기사
h tps : //는 c r의 온. 코 m / HO W-TO-FU X-TE-I-O-11
h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 46339063 / 이오 s - 11 - 사후 리보오 tst 등 p - 모도 l - xt

미확인입니다만, 아무래도 bootstrap의 model에서도 일어나고 있는 모습.
여기는 부모 요소에 position: fixed를 맞추는 것으로 고쳐 쓰고 있습니다만, bootstrap를 사용하고 있지 않는 자신의 환경에서는 수정을 확인할 수 없었습니다.