Firefox Send website has awkward horizontal scrollbar/scrollability on Firefox for Android, due to unnecessary overflow:visible on file input widget

[dholbert]

The https://send.firefox.com/ website is horizontally scrollable on Firefox for Android, for no good reason (there's nothing visible in the offscreen overflowed area).

See discussion/diagnosis in https://webcompat.com/issues/27624 and https://bugzilla.mozilla.org/show_bug.cgi?id=1542930

It turns out the culprit is an invisible 0-sized <input type="file"> widget:

<input id="file-upload" type="file" multiple="multiple" class="opacity-0 w-0 h-0 appearance-none absolute">

That widget's contents are invisible but are present from a layout perspective, and they leak out and create scrollable overflow because Firefox Send has this odd CSS rule:

button, input {
    overflow: visible;
}

REQUEST: Could you get rid of that rule, or at least override it on this particular input element by giving this input overflow:hidden? (which is what it would have by default if Firefox Send didn't have the above-quoted CSS rule)

[dannycoates]

Thanks for the bug / fix @dholbert

That css rule comes from normalize.css so if you think it's odd please report it to them since it's pretty widely used.

I'll change the overflow on that element.

[dholbert]

That css rule comes from normalize.css so if you think it's odd please report it to them since it's pretty widely used.

Thanks for the heads-up. I did a bit more investigation and I'm pretty sure the input selector doesn't do any good in that normalize.css rule (and does cause interop harm, as in this bug here). So I filed necolas/normalize.css#779 to request that it be removed.