添加填充使得textarea输入在某些操作系统上不可见

Question

我有这个textarea，在聚焦时会得到一些风格。

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

其中一种风格是填充

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

虽然这在Windows 10，Mac和Android上使用Firefox，Edge，Chrome和Opera就像一个魅力，但在所有基于debian的机器上的Firefox中存在 我测试了显然也是在Windows-10之前（见评论）。所有文本在第二个应用填充时消失，但它只是不可见，因为如果您继续键入文本将被键入并可以复制或剪切。如果禁用填充，也会立即显示。

如果您想自己查看整个表单：https://neurotactics.de/contact

Answer 1

我认为它与应用于 textarea <的属性组合 box-sizing ， height 和 padding 有关/强>点。

box-sizing: border-box - 宽度和高度属性（以及最小/最大属性）包括内容，填充和边框

因此，如果您的textarea在焦点上有height: 64px和padding-bottom: 150px，则内容没有剩余空间，因此可能会在firefox上导致此行为。

我建议使用属性 min-height 属性而不是 padding 的不同方法。
例如，默认情况下，您的textarea可以将min-height设置为0，因此正在应用height属性：

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

在焦点上，增加最小高度以覆盖高度属性：

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