Select text bad misaligned in Firefox with alpha 5

[fredgate]

The text in the input selects is misaligned vertically. The bottom of the text is clipped; the text is not centered vertically and is too down.
I have the problem since I upgraded to alpha 5; before with the aplha 2 version, I had not the problem.
This occurs in Firefox 49.0.2; in Internet Explorer 11, it seems correct.

Here is a jsfiddle showing the problem :
https://jsfiddle.net/hdakuemq/

[fredgate]

May be that it is this rule that produces the problem :

select.form-control:not([size]):not([multiple]) {
  height: calc(2.5rem - 2px);
}

When I deactivate it, the padding is correct and the display good; but the select is too high.

[nextgenthemes]

Firefox 49.0.2 on ubuntu 16.04 I see no clipped text. A screenshot would be helpful I cant see any issue.

[fredgate]

Here is a screenshot showing the problem with 49.0.2 on Windows 7 64 bits.

[nextgenthemes]

OK I don't see that in Ubuntu.

[ghost]

Firefox 50.0 on OS X still has this problem. Chrome 54.0.2840.98 displays this without clipping. We're using bootstrap 4.0.0-alpha.5 with $enable-flex: true and $font-size-root: 12px.

<li class="form-group">  
    <label for="id_project_type_education_context">  
        Diplomarbeit / Dissertation  
    </label>  
    <select class="form-control">  
        <option>Dissertation</option>  
        <option>Diplomarbeit</option>  
    </select>  
</li>

[bardiharborow]

Cannot reproduce on Firefox 51.0a2. Possible browser bug.

[ghost]

Problem still there with Firefox 51.0b1 under macOS 10.12.1. Also, changing height: calc(2.5rem - 2px); to height: calc(2.5rem); makes the field not cut off anymore.

[mdo]

Dupe of #20977, fixed with #21171.