select: disabling fields adds a -1px margin, which causes page to jump around if there are multiple select fields being disabled

[bersLucas]

Bug, enhancement request, or proposal:

Disabling a <md-select> fields adds a -1px margin, which causes the page to jump around if there are multiple <md-select> items being disabled at once

CodePen and steps to reproduce the issue:

https://codepen.io/berslucas/pen/QWWpVPb

Detailed Reproduction Steps:

1. Click on "Disable Fields"
2. All select boxes push the page up

What is the expected behavior?

Select boxes should remain at the same position, but change color/opacity

What is the current behavior?

Select boxes gain a -1px top-margin

What is the use-case or motivation for changing an existing behavior?

Element movement in the middle of an interaction

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.7.8
• AngularJS Material: 1.1.17
• OS: OSX Mojave
• Browsers: Chromium 77

Is there anything else we should know? Stack Traces, Screenshots, etc.

The solution for this is to remove margin-bottom: -1px; from the md-select[disabled] .md-select-value

md-select[disabled] .md-select-value {
    background-position: 0 bottom;
    background-size: 4px 1px;
    background-repeat: repeat-x;
    /* margin-bottom: -1px; */
}

[Splaktar]

I can reproduce this in 1.1.21 and can verify (via this updated CodePen) that this affects md-select with and without a md-input-container.

It was introduced in 0.11.1 as part of 9e814c9.

That change include the following comment

margin-bottom: -1px; // Shift downward so dotted line is positioned the same as other bottom borders

[Splaktar]

I created another updated CodePen with some of the configuration that I used to debug this issue and come to what appears to be a solution.