Добавление отступов делает ввод текстовой области невидимым в некоторых ОС

Question

У меня есть текстовое поле, которое получает несколько стилей при фокусировке.

<textarea id="msg" rows="4" name="msg" placeholder="Your message.."></textarea>

Одним из этих стилей является отступ

#msg:focus {
    padding-bottom: 150px;
}

Хотя в Windows 10, Mac и Android с Firefox, Edge, Chrome и Opera это работает как брелок, в Firefox на всех машинах на основе debian проблема , которую я тестировал, и , по-видимому, также наpre-Windows-10 (см. комментарии).Весь текст исчезает во второй раз, когда применяется отступ, но он становится невидимым, потому что, если вы продолжите печатать, текст будет напечатан и может быть скопирован или вырезан.Он также сразу появится, если вы отключите заполнение.

Если вы хотите проверить всю форму самостоятельно: https://neurotactics.de/contact

Answer 1

Я думаю, что это как-то связано с комбинацией свойств размер блока , высота и отступ , примененный к вашей текстовой области .

box-sizing: border-box - Свойства ширины и высоты (и свойства min / max) включают содержимое, отступы и рамку

Так что, если ваша текстовая область имеет height: 64px и padding-bottom: 150px в фокусе, для содержимого не осталось места, поэтому это, вероятно, вызывает такое поведение у firefox.

Я предлагаю другой подход, используя свойство min-height свойство вместо padding .
Например, текстовая область может иметь минимальную высоту по умолчанию, равную 0, поэтому применяется свойство высоты:

#msg {
    height: 64px;
    min-height: 0;
}

И в фокусе увеличьте минимальную высотупереопределить свойство высоты:

#msg:focus {
    min-height: 150px;
}