Hack for iOS temporal inputs affecting OSX

[mikaelharsjo]

forms.less includes hacks (line 180) for an iOS alignment bug. These get applied to Chrome and Safari on OSX as well on my retina screen MacBook. Giving for example <input type="time"> an unexpected line-height

This is the rule I think needs tweaking:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="date"],
  input[type="time"],

My -webkit-min-device-pixel-ratio is 2 so I'm well above this. I have no solution for this, sorry, and I don't think the original bug https://bugs.webkit.org/show_bug.cgi?id=139848 is fixed (I don't have an iOS device nearby).

[zacechola]

JS Bin of issue, which I don't see in Chrome 45.0.2429.0 canary (64-bit) on OSX 10.10.3 or Safari version 8.0.6 (10600.6.3).

Could you provide a bit more browser/OS info and compare my bin to your where you see the issue?

X-Ref: #14234, #13098, #11266

[mitchlloyd]

This issue only seems to appear when the form-control class is omitted.

I just came across this when refactoring some markup. This works fine when using Bootstrap as intended, but it is a gotcha.

[cvrebert]

Testcase: http://jsfiddle.net/b8qbpxtq/2/
@mikaelharsjo I can't seem to reproduce (or otherwise I don't quite understand what the problem is).
Firefox and Chrome look like they style the text in the same way, and the text in the time inputs looks like it's styled the same as the text in the text inputs. This is on an OS X Yosemite retina MacBook Pro.

[mikaelharsjo]

@zacechola @mitchlloyd Maybe I was unclear but this is only a issue when you don't have class="form-control". Even if that´s not the bootstrap way of doing it I would expect <input type="time"> and <input type="text"> next to each other be the same height.

[mikaelharsjo]

@cvrebert Your fiddle seems to work for me. Fixed in 3.3.5?

[mikaelharsjo]

Yes confirmed. This is resolved in master now by: 52110fa