Temporal inputs are taller than other textual inputs in OS X Safari

[cvrebert]

Unlike iOS Safari, OS X Safari doesn't support the temporal input types and just treats them like text inputs. Unfortunately, since our current CSS hack is Safari-specific rather than iOS-specific, it turns out that desktop Safari is (and has been, even prior to #18816) basically suffering from #17308. (Looks like nobody happened to test in OS X Safari previously.)
There are some candidate hacks under the "Special Purpose" subsection of http://browserstrangeness.bitbucket.org/css_hacks.html#webkit which discriminate between iOS and other WebKit browsers and thus might be useful.

[cvrebert]

Potential solution: Override the iOS CSS back to normal in rule that uses _:-webkit-full-screen (which doesn't match on iOS; see http://browserbu.gs/css-hacks/webkit-full-screen/).
Though it would be simpler, I haven't come across an iOS-only CSS hack.

[mdo]

Did we ever file a bug for this? Feels wrong to be hacking away at it these inputs like this. 🤔 Setting a fixed height appears to resolve the Chrome issue for me, but to do it right it requires calc and a whole bunch of math.

[mdo]

Also note I appear to have removed the changes from #18816.

[cvrebert]

Yes, the root iOS Safari bug is https://bugs.webkit.org/show_bug.cgi?id=139848