title: angular material mat-select looks empty in firefox
body: <p>in one type of components in my project I have a mat-select. As you see in the picture below in the chrome it works perfectly fine.</p>
  
  <p>before click:</p>
  
  <p><a href="https://i.stack.imgur.com/wTDIJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wTDIJ.png" alt="enter image description here"></a></p>
  
  <p>after click:</p>
  
  <p><a href="https://i.stack.imgur.com/KmSPt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KmSPt.png" alt="enter image description here"></a>
  (chrome)</p>
  
  <p>But when I try to open the same page in Mozilla Firefox i get something like this instead. As you see it looks empty but logically it works fine.</p>
  
  <p>before click:</p>
  
  <p><a href="https://i.stack.imgur.com/ZBGGy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZBGGy.png" alt="enter image description here"></a></p>
  
  <p>after click:</p>
  
  <p><a href="https://i.stack.imgur.com/xou7x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xou7x.png" alt="enter image description here"></a>
  (firefox)</p>
  
  <p>the code is simple. It has a two-way binding with a var. Does any body have any idea why this happens?</p>
  
  <pre><code>  &lt;div *ngIf="onEdit &amp;&amp; key == 'relationship'" class="d-table-cell" style="float: left !important; max-width: 50%;"&gt;
        &lt;div style="margin-top: 10px; margin-bottom: 2px"&gt;
            &lt;mat-select placeholder="new relationShip" [(ngModel)]="editedValue"&gt;
                &lt;mat-option [value]="'causes'"&gt;causes&lt;/mat-option&gt;
                &lt;mat-option [value]="'caused_by'"&gt;caused_by&lt;/mat-option&gt;
                &lt;mat-option [value]="'member_of'"&gt;member_of&lt;/mat-option&gt;
                &lt;mat-option [value]="'includes'"&gt;includes&lt;/mat-option&gt;
                &lt;mat-option [value]="'associated_with'"&gt;associated_with&lt;/mat-option&gt;
            &lt;/mat-select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
    &lt;div *ngIf="onEdit" style="float: right !important; width: 50%;margin-top: 10px;"  &gt;
      &lt;button mat-flat-button color="primary" (click)="onSubmitEdit()" style="width: 10px; margin-right: 4%"&gt;submit&lt;/button&gt;
      &lt;button mat-flat-button color="warn" (click)="onEdit = !onEdit"&gt;cancel&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>