1543477 - zero-sized file input widgets create a lot of scrollable overflow (if you give them overflow:visible)

Status: RESOLVED FIXED

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

Description

[Daniel Holbert [:dholbert]]

STR:

1. Load attached testcase.

EXPECTED RESULTS (from a sites-expecting-Chrome's-behavior standpoint):
4px by 4px box, with the outer 2px being a red outline and the inner 2px being a black border.

ACTUAL RESULTS:
The red outlined area is quite large, and all of the file control content (button and "..." field) are visible.

This is the core webcompat difference between us & Chrome that's in play in bug 1542930.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Comment 2

[Daniel Holbert [:dholbert]]

Edge 18 gives "EXPECTED RESULTS", btw -- i.e. they match Chrome on this (even before their switch to chromium as the rendering engine).

Safari 12 matches Chrome, too.

So this seems like a case where we're on our own.

Comment 3

[Daniel Holbert [:dholbert]]

Note that this is not a regression; I can reproduce the issue (large red box) at least as far back as Nightly 2010-12-01 (Firefox 4.0b8pre).

Comment 4

[Daniel Holbert [:dholbert]]

Also, for the record: in Firefox, this seems to be the only <input> type whose rendering changes when given overflow:visible.

Here are two fiddles with every input type listed on MDN (besides hidden), with small content box sizes:

overflow unspecified: http://jsfiddle.net/dholbert/sghn2tz4/embedded/result,css,html
overflow:visible: http://jsfiddle.net/dholbert/sghn2tz4/1/embedded/result,css,html

Comment 6

[Mats Palmgren (inactive)]

The HTML spec seems to be in favor of Firefox though, since display:inline-block boxes should overflow when overflow:visible is set.
https://html.spec.whatwg.org/multipage/rendering.html#the-input-element-as-a-file-upload-control

I guess we could add input { overflow: hidden !important; } in the UA sheet if it's necessary for compat.

BTW, overflow: scroll creates scrollbars for several types of form controls (including type=file) in Chrome, although they are non-functional (i.e. you can't actually scroll to make the overflow visible), so I guess that would fix that bug too. :-)
(and for the controls where a scrollbar would make some sense, e.g. type=text, it does nothing. LUL)

Comment 7

[Mats Palmgren (inactive)]

Just to see what breaks:
https://treeherder.mozilla.org/#/jobs?repo=try&revision=e887d5dd9247d12cc7f56c0d1b0f793035096417

Comment 8

[Mats Palmgren (inactive)]

It's interesting that adding an explicit overflow: hidden on elements
that implicitly do that internally changes the rendering.
For example, it "broke" layout/reftests/css-grid/grid-item-overflow-stretch-005.html
since overflow give different stretch behavior. That seems like
a bug to me. (There are also some <input type=color> failures
that I haven't looked into.)

The HTML spec says "render as an inline-block box":
https://html.spec.whatwg.org/multipage/rendering.html#widgets
for most form controls AFAICT, and this is also what is proposed in:
https://github.com/whatwg/html/issues/4082

The CSS spec for overflow says it applies to "block containers":
https://drafts.csswg.org/css-overflow-3/#propdef-overflow
which includes inline-block.

I think there's a conflict between these two specs, because
honoring overflow on <input>s wouldn't be web-compatible.

I note however that the AMS definition:
https://drafts.csswg.org/css-grid/#min-size-auto
https://drafts.csswg.org/css-flexbox/#min-size-auto
now uses the phrase "item that is not a scroll container"
which side-steps the issue somewhat (since it's decoupled
from the actual overflow value).

Comment 9

[Mats Palmgren (inactive)]

Attachment: Testcase #2: overflow:scroll on <input>s

Comment 10

[Mats Palmgren (inactive)]

Attachment: Bug 1543477 - Make <input type=file> always clip its content. r=dholbert

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/8b68648aae2d
Make <input type=file> always clip its content.  r=dholbert

Comment 12

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/8b68648aae2d