Created by: cvrebert
Fixes #17308 (closed). Research backing up this hack: http://browserbu.gs/css-hacks/webkit-full-page-media/
Chrome screenshot with the patch applied (temporal inputs are no longer super-tall):
iOS 9 Safari screenshot with the patch applied (text in temporal inputs is still vertically centered (at least by eyeball)):
The heights of datetime-local
date
, month
, week
, and time
inputs in Chrome now become 40px, which is still different from the 38px height of the other textual inputs, but that particular discrepancy isn't caused by the iOS CSS that we're fixing here. Will open a new issue for that.
There is some slight redundancy in the generated selectors, but it doesn't affect the potency of the hack. Here's what I mean:
_::-webkit-full-page-media.input-lg,
.input-group-lg _::-webkit-full-page-media.form-control,
input[type="date"].input-lg,
...
I couldn't find a way in Sass, when nesting is involved, to tack a selector onto a selector list without it getting cross-producted with the nestees. Perhaps there's some particular Sass judo I don't know about.
CC: @mdo