1875156 - Textarea with full height overflows

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[Jakub T. Jankiewicz]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:121.0) Gecko/20100101 Firefox/121.0

Steps to reproduce:

1. Open this demo https://codepen.io/jcubic/pen/KKEWxLV
2. The textarea is full height but there is a scrollbar

Actual results:

There is a vertical scrollbar

Expected results:

There should be no scrollbar because of this CSS:

body {
margin: 0;
padding: 0;
}
textarea {
width: 100%;
height: 100vh;
box-sizing: border-box;
}

It works in Chrome.

Aditional Note
This is not an issue with Codepen the same happens in Debug mode (in a separate HTML file)

Comment 1

[Jakub T. Jankiewicz]

PS: the Bugzilla could give a hint that you can use Markdown when creating a bug.

Comment 2

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[David Shin[:dshin]]

Hm, there is a block direction margin of 1px that removes the scrollbar if margin: 0; is set.
That was added all the way back in 1999 here.

Comment 4

[Jakub T. Jankiewicz]

I didn't check the margin: 0, the margin is even displayed in Dev Tools as (margin-block: 1px) but I didn't notice that.
CSS Normalize which is available as an option on CodePen seems also to solve the issue.

Do you think this is something that can be removed or do you need to be aware of this inconsistency in Firefox?

Comment 5

[David Shin[:dshin]]

Hm, I can't see it being required/rejected by the spec (I could be missing it, though).
Hard to measure what kind of impact this could have since it's been in some form since it's been in there since... 1999, but may be worth removing it given how box sizing works and how it can cause unexpected overflows as the reporter experienced.

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: reporter's testcase (taken from codepen)

Here's a copy of the testcase as a bugzilla attachment, in case the codepen disappears at some point.

With this testcase and the codepen, I see a scrollbar in Firefox, Chrome, and WebKit (epiphany on Ubuntu), so this doesn't seem to be a Firefox-specific issue, unless I'm missing something...

Comment 7

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 ('vertical-align:top' to avoid any baseline-alignment factors)

Aha, it looks like the Chrome/WebKit scrollbars that I was seeing were from the fact that the textarea is inline-level by default, and it was getting baseline-aligned with its block which introduced a half-pixel offset or something along those lines.

With vertical-align:top to remove that factor... Chrome/WebKit don't show a scrollbar anymore, but Firefox still does (due to the margin that dshin observed)

Comment 8

[Daniel Holbert [:dholbert]]

Attachment: Bug 1875156: Remove nonstandard block-axis 1px margins from textarea default styles. r?#layout

These 1px margins were added (with no explanation/bug-link) in 1999, here:
https://searchfox.org/firefox-main/diff/784c6428b65d9539cc8f5e30d18e59a050740007/layout/html/document/src/html.css#1293

They're not part of the html spec, and Chromium/WebKit don't have them; and at
least one web developer has run up against them as a sharp edge (causing a
full-viewport textarea to barely overflow). So let's just remove them.

Comment 9

[Daniel Holbert [:dholbert]]

Patch appearing shortly just posted.

Try run: https://treeherder.mozilla.org/jobs?repo=try&landoCommitID=183582

Comment 10

[Daniel Holbert [:dholbert]]

One other testcase for this bug, illustrating that it's ~fine and good for visual consistency:

data:text/html,<style>textarea,input{display:block;}</style><textarea></textarea><textarea></textarea><input><input><input type="submit"><input type="submit">

Before the fix, Firefox (and no other browser) shows 1px of margins around the textareas here but not the other elements.
After the fix, that textarea-specific margin (shown in the top-left part of screenshot below) will be gone.

Comment 11

[Daniel Holbert [:dholbert]]

Attachment: screenshot of comment 10 data-URI testcase in Firefox without-the-fix (left) vs Chrome (right)

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/1dde7cf00d9b
https://hg.mozilla.org/integration/autoland/rev/5545120859d3
Remove nonstandard block-axis 1px margins from textarea default styles. r=layout-reviewers,firefox-style-system-reviewers,emilio

Comment 13

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/5545120859d3

Comment 14

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/58308 for changes under testing/web-platform/tests

Comment 15

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot