1481596 - Make `-moz-appearance: none` on <textarea> behave more like Chrome

Status: NEW

(Core :: Layout, enhancement, P3)

Description

[Jonathan Watt [:jwatt]]

`-moz-appearance: none` on <textarea> results in us using much more retro borders in Firefox (inset?) than Chrome does. We should change to using `1px solid` like Chrome for better compatibility. Probably not very important though since I expect most sites set the border explicitly when setting `-webkit-appearance: none`.

Comment 1

[Mats Palmgren (inactive)]

Chrome is inconsistent though...
data:text/html,<input style="-webkit-appearance:none">
is using the "retro" 2px inset borders (for all <input> types AFAICT).
<select> is using "1px solid" though.

Ideally, all form controls that normally has a border should
use the same border style when it's -webkit-appearance:none.
Not sure if it's worth changing this now though...
If we change our 2px borders to 1px and increase the padding
by 1px to keep the same outer size, we could still break content
if it's just overriding the border and not the padding.

Changing <textarea>s only to be compatible with Chrome might be
safe though.  In that case we should probably review the entire
rules for textarea in the respective UA sheets.

Currently, Gecko has:

input:-moz-read-write, textarea:-moz-read-write {
    -moz-user-modify: read-write !important;
}

input:not([type="image"]), textarea {
    box-sizing: border-box;
}

textarea {
    margin-block-start: 1px;
    margin-block-end: 1px;
    border: 2px inset ThreeDLightShadow;
    padding-inline-start: 1px;
    padding-inline-end: 1px;
    background-color: -moz-Field;
    color: -moz-FieldText;
    font: medium -moz-fixed;
    text-rendering: optimizeLegibility;
    text-align: start;
    text-transform: none;
    word-spacing: normal;
    letter-spacing: normal;
    vertical-align: text-bottom;
    cursor: text;
    resize: both;
    -moz-appearance: textfield-multiline;
    text-indent: 0;
    -moz-user-select: text;
    text-shadow: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-clip-box: content-box;
}

===============================================================

Chrome has:

textarea {
    padding: 2px 0px 0px 2px;
}

input:not([type="image" i]), textarea {
    box-sizing: border-box;
}

textarea {
    font-family: monospace;
    border-color: rgb(169, 169, 169);
}

textarea {
    -webkit-appearance: textarea;
    background-color: white;
    -webkit-rtl-ordering: logical;
    flex-direction: column;
    resize: auto;
    cursor: text;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    border-width: 1px;
    border-style: solid;
    border-color: initial;
    border-image: initial;
    padding: 2px;
}

input, textarea, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 13.3333px Arial;
}

input, textarea, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb !important;
}

Comment 2

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 3

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.