Вкладка «Ввод» с ввода сдвигает ввод только в Chrome.

Question

Пришло время повторить это в jsfiddle. Но я сделал это:

https://jsfiddle.net/zhankezk/uvmxq6we/2/

Шаги для репликации:

Нажмите в поисковую текстовое поле, нажмите клавишу табуляции

Выпуск:

поиска текстового поля и кнопки поиска сдвиги вверх

Ожидаемые:

Они должны оставаться там, где они есть.

html Здесь представлены фрагменты с фактического сайта. Но я заметил, что проблема возникает только в том случае, если она находится под «глобально-навигационной темой - личный» div, и причина, по которой я чувствую, что это ошибка Chrome, заключается в том, что, во-первых, она отлично работает в Firefox и IE. Во-вторых, после нажатия вкладки и сдвига места, если вы настроите любой вертикальный стиль, проблема исчезнет, ​​например, вы можете снять флажок «position: relative» для div «global-nav__search is-expand» и пометить ее снова. проблема исчезнет.

<div class="global-nav theme--personal"> 
    <div class="c-search fn_search-suggestions"> 
    <div class="global-nav__search is-expanded"> 
     <input type="search" class="search__field" placeholder="Search" name="query" data-target-url="/personal/personalsearchresults" autocomplete="off"> 
     <a href="#" class="icon-search fn_search-button" tabindex="-1"><span class="vh">Search</span></a> 
    </div> 
    <div class="c-suggestions" tabindex="-1"> 
     <a href="#">Search for ‘home’</a> 
    </div> 
    </div> 
</div> 

Я могу быть совершенно неправ, спасибо всем, кто за помощь!

Answer 1

Это своего странно для меня, и я не совсем уверен, что это не представляет собой ошибку в Chrome (и/или perhaps an accessibility feature?), но мне кажется, что Chrome является

1. перелива большой «Start «контент как скрытый, как ожидалось (хотя он абсолютно позиционируется, его родительский родственник)
2. не скрывает переполненный абсолютно позиционированный ребенок (как ожидается?), поскольку переполнение: скрытый контейнер не является абсолютным/относительным позиционированием сам, но кажется, что
3. при переходе на th e абсолютно позиционированный элемент, Chrome внезапно, похоже, хочет учесть контент перед ним, включая более крупную ссылку «Пуск», поэтому кажется, что это «прокрутка» содержимого переполнения: скрытый элемент для вас (даже несмотря на то, что вы меняете фокус на это уже видно из-за абсолютного позиционирования).

(По крайней мере, я думаю, что это то, что происходит. Тем более, что я не мог видеть, какие свойства CSS изменения в инспекторе при обходе назад и вперед.)

Так что же делать? Кажется, что два обходом является либо

1. Изменение line-height свойства этой кнопки «Пуск», чтобы соответствовать размеру шрифта (1.625rem), я так думаю, что это высота принимается во внимание при переполнении, и/или
2. установить явную (и достаточно большую) высоту на .global-nav .c-search, я полагаю, что Chrome не получает «удивление» от разной высоты контента в элементе overflow:hidden.