1456052 - Textarea padding crops text to the content box in the block direction, unlike other browsers.

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect, P3)

Description

[Karl Dubost💡 :karlcow]

This is a spin-off of https://webcompat.com/issues/16534

The textarea for comment is cutting off the placeholder text in there.


<textarea aria-label="Adding a comment will re-open this discussion"></textarea>
Because of the padding and fixed height. 

When playing with the padding 

```html
<textarea class="dcs-a-dcs-db-dcs-se" autocomplete="false" x-webkit-speech="" speech="" role="combobox" aria-autocomplete="list" aria-label="Adding a comment will re-open this discussion" style=""></textarea>
```

So indeed the height is fixed for this `textarea` until you make a big padding.

```css
.dcs-a-dcs-lb-dcs-db-dcs-eb .dcs-a-dcs-db-dcs-se {
    background-color: #fff;
    border: 1px solid #c9d4ec;
    height: 23px;
    font-size: 12px;
}


.dcs-a-dcs-db-dcs-se {
    border: 1px solid #c8c8c8;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: #999;
    font-family: Arial,sans-serif;
    font-size: 13px;
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    outline-width: 0!important;
    padding: 6px;
    resize: none;
    width: 100%;
} 
```

Changing the padding value grows the textarea box, but it does slightly differently in Chrome and Firefox.

I don't know if we are in unspecified territories or if one of the browser is more right than the other. 

See screenshots in the webcompat issue.

Comment 1

[Firefox Bug Husbandry Bot]

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

Comment 2

[Firefox Bug Husbandry Bot]

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

Comment 3

[Mike Taylor [:miketaylr]]

Emilio, can you give this a better title? It kinda seems related to Bug 1561794 (in spirit, at least).

Comment 4

[Emilio Cobos Álvarez [:emilio]]

So a reduced test-case would be something like:

• data:text/html,<textarea placeholder="foo barr baz foo barr baz foo barr baz foo barr baz" style="max-width: 100px; height: 23px; padding: 6px; box-sizing: border-box; resize: none; overflow: hidden"></textarea>

If I understand correctly. Seems like Chrome doesn't clip the bottom to the content box but the padding box. The Gecko behavior is caused by this line.

It seems this is bug 752790, but for textareas.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1456052 - Change overflow-clip-box of textarea to be consistent with text inputs and match other browsers. r=dholbert

Comment 6

[Daniel Holbert [:dholbert]]

Looks like we should update these pages in response to this change:
https://developer.mozilla.org/en-US/docs/Mozilla/Gecko/Chrome/CSS/overflow-clip-box
https://developer.mozilla.org/en-US/docs/Mozilla/Gecko/Chrome/CSS/overflow-clip-box-block

Right now, those pages have a note saying ...<input type="text"> and similar use the value content-box...

Comment 7

[Daniel Holbert [:dholbert]]

(As of this bug, <input type="text"> and similar will use the compound value padding-box content-box.)

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8514a3095fca
Change overflow-clip-box of textarea to be consistent with text inputs and match other browsers. r=dholbert

Comment 9

[Andrei Ciure[:aciure]]

Backed out changeset 8514a3095fca (bug 1456052) for causing padding-scrollbar-placement.html to perma fail

push that caused the backout: https://treeherder.mozilla.org/#/jobs?repo=autoland&selectedJob=257772939&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel%2Crunnable&revision=8514a3095fca5290475ec843e201c357944b63c5

failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&selectedJob=257772939&resultStatus=testfailed%2Cbusted%2Cexception&classifiedState=unclassified&fromchange=a858e44115324243417d830fafa8a4a8eb57e5a0&searchStr=windows%2C10%2Cx64%2Cquantumrender%2Cdebug%2Creftests%2Ctest-windows10-64-qr%2Fdebug-reftest-e10s-4%2Cr%28r4%29

backout: https://hg.mozilla.org/integration/autoland/rev/ff46b4053312b2320761acf4cb1e15d174456c8e

Comment 10

[Emilio Cobos Álvarez [:emilio]]

Fixed the test, thanks Andrei :)

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/97e691afc504
Change overflow-clip-box of textarea to be consistent with text inputs and match other browsers. r=dholbert

Comment 12

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/97e691afc504

Comment 13

[Emilio Cobos Álvarez [:emilio]]

Backed out in bug 1569078.

Comment 14

[BugBot [:suhaib / :marco/ :calixte]]

There's a r+ patch which didn't land and no activity in this bug for 2 weeks.
:emilio, could you have a look please?
For more information, please visit auto_nag documentation.

Comment 15

[Emilio Cobos Álvarez [:emilio]]

Was backed out due to a regression.

Comment 16

[Chris Mills [:cmills]]

I have updated the notes on the pages dholbert referenced, as advised. Let me know if that looks OK for the docs.

Comment 17

[Daniel Holbert [:dholbert]]

Oops, sorry Chris -- this change was actually backed out (see comment 13), so the pages' old content is back to being accurate (and the update has inadvertently made it inaccurate).

Would you mind reverting the MDN change? Perhaps this patch will re-land at some point and we'll want to make the change again, but for now we're back to where we started. :)

Comment 18

[Daniel Holbert [:dholbert]]

[--> restoring the "dev-doc-needed" keyword as a reminder that we'll want to perform this MDN edit again, once this bug is fixed.]

Comment 19

[Chris Mills [:cmills]]

(In reply to Daniel Holbert [:dholbert] from comment #17)

Oops, sorry Chris -- this change was actually backed out (see comment 13), so the pages' old content is back to being accurate (and the update has inadvertently made it inaccurate).

Would you mind reverting the MDN change? Perhaps this patch will re-land at some point and we'll want to make the change again, but for now we're back to where we started. :)

Ah, no worries - reverted!

Comment 20

[Emilio Cobos Álvarez [:emilio]]

It doesn't seem like GTranslate breaks with a rebased version of the patch, so I'll try to reland this.

Comment 22

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/bfa4852bf11f
Change overflow-clip-box of textarea to be consistent with text inputs and match other browsers. r=dholbert

Comment 23

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/36d6f96547e1
Tweak a fuzzy test annotation.

Comment 24

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/bfa4852bf11f
https://hg.mozilla.org/mozilla-central/rev/36d6f96547e1

Comment 25

[Chris Mills [:cmills]]

This is Firefox internal content, so not in the remit of the MDN writers team any more (it currently shows on MDN as archived, and we are hoping it'll be moved off MDN soonish). I'm therefore removing dev-doc-needed from here.