Select menu background goes black on IE for angular material md-select

Question

There is one issue with the angular material with IE-11 and IE-edge browsers,

When the body content is vertically scrolling then angular meterial show the black border around the select box as shown in this image.

Here is also the code pen where the issue is reproduced.

<md-input-container> <label>State</label> <md-select ng-model="ctrl.userState"> <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}" ng-disabled="$index === 1"> {{state.abbrev}} </md-option> </md-select> </md-input-container> http://codepen.io/anon/pen/BzRjBx

Issue can be solved by removing the position:fixed . but it will create issue with the angular material functionality.

What to do?

Answer 1

none of the other answers I posted earlier seem to be a perfect fit although they initially seemed to resolve the issue.

The real culprit seems to be the background set by angular-material.

See the following codepen for the fix: http://codepen.io/anon/pen/gwOdNm

The following style causes this issue:

html.md-default-theme, html, body.md-default-theme, body {
    color: rgba(0,0,0,0.87);
    background-color: rgb(250,250,250);
}

overriding with the following style seems to be completely fixed the issue:

html.md-default-theme, html, body.md-default-theme, body {
    background-color: transparent;
}

Answer 2

this seems to happen when bootstrap is also used along with angular material. haven't found a fix yet.

Answer 3

this seems to happen when bootstrap is also used along with angular material.

the culprit seems to be border-box sizing on *.

md-select (displays weird backgrounds) when border-box is used on *

eg * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Therefore, using bootstrap along with angular-material causes this issue.

The following fixes it but screws up bootstrap styling. * { -webkit-box-sizing: unset; -moz-box-sizing: unset; box-sizing: unset; }