Please remove the `input` selector from `button,input { overflow: visible}` rule

dholbert commented 5 years ago

Right now, normalize.css has a rule to make all input elements have overflow:visible. This has no effect in Chrome and Safari, and it has an effect in IE/Edge/Firefox which makes them diverge from Chrome/Safari, which can then cause interop problems for sites that use normalize.css. So, it's a net negative right now. Could it be removed?

Investigation: Below is a testcase I used to test the effect of this rule (with explicitly-sized tiny widgets whose contents are larger than the explicit size, where possible), on every input type that is listed on MDN:

overflow unspecified (default): http://jsfiddle.net/dholbert/sghn2tz4/embedded/result,css,html overflow:visible added (as in normalize.css) http://jsfiddle.net/dholbert/sghn2tz4/1/embedded/result,css,html

Notable differences between these versions, on each major browser engine:

In IE11 and Edge 18, for input type="button,reset,submit", the overflowing button label becomes visible if you provide overflow:visible. There are no other differences.
in Firefox 68 (nightly), for input type="file", the "Browse" button-label and "..." filename area become visible if you provide overflow:visible There are no other differences.
In Chrome 75 (dev) and Safari 12, there's no difference between the two versions.

Most notably, the widgets that start overflowing via overflow:visible in IE/Edge/Firefox are always clipped in Chrome/Safari, even with overflow:visible specified.

Conclusions: In the majority-market-share browser engine family (Blink/WebKit), overflow:visible has no effect on input elements. And in other engines, the only effect is to cause these engines to diverge from the Blink/WebKit behavior.

So, unless there's a reason to keep this rule that I'm not seeing, it'd be great if we could remove it, to avoid introducing web compatibility issues https://github.com/mozilla/send/issues/1295 .

Thanks!

dholbert commented 5 years ago

For convenience, I've posted a pull request that I think addresses this in https://github.com/necolas/normalize.css/pull/780 . (Let me know if I'm missing something in my analysis, or if you've got any other concerns about this.)

garrettw commented 1 year ago

Just tested this in current Edge and Firefox, and it seems overflow: visible no longer has any meaningful effect there either. (In Edge, interestingly enough, it causes a very slight positioning discrepancy.) So I'm removing it from input in my normalize in https://github.com/garrettw/vitals

necolas / normalize.css

Please remove the `input` selector from `button,input { overflow: visible}` rule #779