Chrome превращает поле ввода в многострочное после добавления и удаления того же класса

Question

Итак, я наткнулся на эту маленькую проблему, в которой я немного запутался. Сначала код:

HTML:

<div>
  <input id="input" type="text" value="Some long long long text that doesn't fit into the input text field">
</div>

<button type="button" onclick="show(false)">
  hide
</button>

<button type="button" onclick="show(true)">
  show
</button>

CSS:

input {
  width: 100px;
  height: 30px;
}
.hidden {
  visibility: hidden;
  position: absolute
}

JS:

var show = b => {
  var input = document.getElementById('input');
  input.classList[b ? 'remove' : 'add']('hidden');
}

I иметь input type="text" на веб-странице. Как только я добавляю класс «hide / offset» к его предку div, а затем удаляю тот же класс, input превращает его содержимое в многострочное (в случае, если оно было слишком длинным для отображения в поле). Скрипка хорошо показывает, что я имею в виду:

https://jsfiddle.net/yq9x01r8/1/

Запуск в Chrome. Нажмите кнопку «Скрыть», затем нажмите кнопку «Показать».

Класс .hidden добавляется непосредственно к input в этом примере. На моей странице он добавлен к одному из родителей, но он создает такое же разбитое поле (однако я не могу воспроизвести его точно так же, слишком много материала и вложения продолжаются).

Есть ли любая причина, почему вход должен делать это? Это ошибка Blink? Любой CSS, который мог бы предотвратить это? Обратите внимание, я бы предпочел не использовать white-space: nowrap;, если это возможно. Спасибо.

Answer 1

Похоже, что Chrome не следует стандартным правилам - ни добавление !important к правилу высоты, ни добавление правила overflow: hidden;, ни выбор селектора для #input больше спецификаций c не позволяют вводить окно становится многострочным.

Однако это может быть крайний случай - правило hidden довольно странно. если вы замените

.hidden {
  visibility: hidden;
  position: absolute;
}

на

.hidden {
  display: none;
}

Chrome, то вернетесь к ожидаемому поведению.

---

Относительно комментариев, альтернативный способ скрыть и показать ввод без изменения его CSS - скрыть и показать его родительский элемент:

var show = b => {
  var input = document.getElementById('input');
  input.parentNode.classList[b ? 'remove' : 'add']('hidden');

Это только спасет поведение Chrome, если родительский узел отображается как элемент блока - пытается перенос input в тег span без изменения правила его отображения на «блок» приводил к повторному появлению многострочного элемента ввода только после удаления класса hidden элемента span.

Если в существующем контейнере div нет других дочерних элементов, то все, что нужно, - это возможность изменить его на абсолютный элемент.

Идея попробовать это пришла из того, как CSS может произойти сбой при применении к абсолютному блоку, но работает при применении к блоку stati c (position: static) внутри того же абсолютного блока.