Я заметил странное поведение сфокусированного поля ввода и позиции каретки после CSS translateY.
caret - мигающая вещь внутри текстового поля, указывающая текущую позицию
Сценарий:
При нажатии кнопки поле ввода получает фокус, и оно перемещается вдоль оси Y на 55 пикселей вниз.
Это происходит только в браузерах iOS 13, поэтомузапустите сниппет на iPhone, пожалуйста
упрощенный пример
https://jsfiddle.net/5gefjvcu/5/
input {
caret-color: red;
transition: transform 1s;
}
input:focus {
transform: translateY(55px);
}
Ожидаемое поведение: Сфокусированное поле ввода перемещается вниз на 55px, а каретка перемещается вместе с элементом ввода
Фактическое поведение
Элемент ввода перемещается вниз, в то время как каретка остается в своем исходном положении до следующего нажатия наполе ввода. Это серьезная проблема с UX :( для наиболее важного текстового поля (поиска) на сайте.