Adding padding renders textarea input invisible on some OS

Question

I have this textarea which gets some styles when focused.

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

One of those styles is a padding

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

While this works like a charm on Windows 10, Mac and Android with Firefox, Edge, Chrome and Opera, there is a problem in Firefox on all debian-based machines I tested and apparently also on pre-Windows-10 (see comments). All text disappears in the second the padding is applied, but it is only invisible, because if you keep typing the text will be typed and can be copied or cut. It will also immediately appear if you disable the padding.

If you want to check out the entire form yourself: https://neurotactics.de/contact

I can see the same problem with Firefox under WIndows 8.1. – Mr Lister Jun 05 '18 at 08:44 — Mr Lister, Jun 05 '18 at 08:44

score 1 · Accepted Answer · answered Jun 05 '18 at 09:32

I think it has something to do with combination of properties box-sizing, height and padding applied to your textarea.

box-sizing: border-box - The width and height properties (and min/max properties) includes content, padding and border

So if your textarea has height: 64px and padding-bottom: 150px on focus, there is no space left for content, thus it probably causes this behavior on firefox.

I suggest different approach using property min-height property instead of padding.
For example, your textarea can have min-height set to 0 by default, so height property is being applied:

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

And on focus, increase min-height to override height property:

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

Manipulating the height property instead of adding a padding worked perfectly. Thanks! I still wonder how the same browsers can react so differently on different OS but I'll let other people worry about that. — leonheess, Jun 05 '18 at 13:30

Adding padding renders textarea input invisible on some OS

1 Answers1