Why does a Bootstrap 3 date input look different in Firefox compared to Chrome?

Question

Would anyone happen to know why there is a difference between the appearance of a Bootstrap 3 date picker input in Mozilla Firefox (as of version 69.0.1) and Google Chrome (version 77.0.3865.120)?

Is it possible to fix the appearance and if so, how could I fix this? The problem is that the value tries to stick to the bottom of any given date input in Firefox.

In Google Chrome:

In Mozilla Firefox:

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label for="sampleInput">Sample input</label> <input type="date" class="form-control" id="sampleInput" placeholder=""> </div> </div> </div> </div>

JSFiddle

Answer 1

As Tyler mentions in the comments, this is caused by the media query

@media screen and (-webkit-min-device-pixel-ratio: 0)

in bootstrap.min.css. This has the -webkit- prefix, so it is designed to be used only in Webkit based browsers, but the problem is that Firefox has a setting that makes it process the -webkit- prefix too, which causes this issue.

To switch this feature off, go to about:config in Firefox and set either layout.css.prefixes.webkit or layout.css.prefixes.device-pixel-ratio-webkit to false . (Which one of those two will work, seems to depend on the version of Firefox.)

Or if you don't want your users to go changing advanced settings in Firefox, you can undo the Bootstrap CSS by setting the line-height for those inputs back to normal in your own CSS.

input[type=date].form-control,input[type=datetime-local].form-control,input[type=month].form-control,input[type=time].form-control {
  line-height:normal;
}