Chrome 39 Bug - Выбор входа () прерывает прокрутку
У меня есть HTML-сетка, где мы используем клавиши со стрелками для навигации по ячейкам (например, электронная таблица из элементов div). Каждая ячейка имеет текстовое поле ВВОД. Мы используем JavaScript, чтобы поймать клавиши со стрелками на клавиатуре для перемещения по сетке. Это работало хорошо во всех браузерах более года. Теперь в Chrome 39 сетка больше не будет правильно прокручиваться, поэтому вход с фокусом будет виден на экране.
Вот скрипка для демонстрации проблемы: прокрутка списка.
// This causes scrolling into view on focus to stop working
$('#grid').on('focus','input',function(e){
this.select();
});
Используйте стрелки вверх и вниз для прокрутки ячеек в списке. Когда он достигает вершины или низа, он должен прокручиваться, если новая ячейка еще не видна.
Этот пример скрипки все еще отлично работает в IE10+ и Firefox, но в Chrome 39 (последняя версия) он не будет прокручиваться при наведении курсора на новую ячейку сверху или снизу. Кроме того, похоже, что текстовые поля иногда перерисовываются на несколько пикселей.
Когда новая ячейка (входная) получает фокус, мы вызываем this.select(), чтобы выбрать любой существующий текст. Если убрать вызов select(), то Chrome 39 снова будет работать нормально. Но пользователи хотели бы видеть выбранный текст.
Вопрос заключается в следующем: что-то, что я делаю, может вызвать это, или это ошибка в Chrome 39? Если это ошибка, кто-нибудь знает обходной путь для выбора входного текста, не нарушая собственную прокрутку в поведении представления? Любые идеи были бы хорошы.
Обновить:
Похоже, что даже удаление ВСЕХ JS-кода, оставляющих просто кучу входных данных в прокручиваемом элементе div, также дает сбой (только в Chrome). Вы можете перемещаться только с помощью tab / shift-tab без JS, но проблема с прокруткой все еще возникает. Я схожу с ума, или другие люди видят ту же самую винтовую прокрутку при запуске этой скрипки?
См. Обновленную скрипку, например.
2 ответа
Что ж, похоже, это просто ошибка в Chrome 39. Надеюсь, они исправят это в ближайшее время.
К счастью, Chrome также является одним из немногих браузеров, который поддерживает метод scrollIntoViewIfNeeded(), поэтому в качестве обходного пути я смог сделать что-то подобное в обработчике событий фокуса:
this.select();
if (typeof this.scrollIntoViewIfNeeded === "function")
this.scrollIntoViewIfNeeded(true);
Итак, это решает насущную проблему.
По-моему, проблема возникает из родительского контейнера с абсолютной / фиксированной позицией со значением z-index. Это влияет на Chrome 39+
Попробуйте установить в этом родительском контейнере следующее объявление CSS:
-webkit-backface-visibility: hidden;