Angular Material floating labels disappearing or getting cut off on hover

Question

I don't want to have to disable floating labels if I don't have to, but they're not behaving well for me. When I hover over them, a lot of the time the floating label will either disappear completely, the bottom half will get cut off, or (more rarely) the top half will get cut off. I've tried adjusting the z-index and overflow visibility on various elements within the mat-form-field, to no success.

Unfortunately I haven't even been able to recreate the issue exactly on StackBlitz. I can reproduce the one where the top of the label gets cut off if there's no top padding between the element above and the form field, but as you can see below there is sufficient top padding where this shouldn't be an issue. Also since the label gets cut off at the bottom or disappears altogether, I'm not sure that parent element padding is the issue.

Not sure this is helpful since it's just a standard mat-form-field, but here's the code:

<mat-form-field appearance="outline" subscriptSizing="dynamic">
  <mat-label>Data Source</mat-label>

  <mat-select [(value)]="source">
    <mat-option [value]="option" *ngFor="let option of sources">
      {{ option.label }}
    </mat-option>
  </mat-select>
</mat-form-field>

There is no additional styling on the form field itself. The form field's parent div applies a grid layout to its children, but this problem also occurs on another component where the form field is within a flex layout as well.

Answer 1

I faced a similar problem with labels getting cut off or disappearing when accessing my Angular app through Remote Desktop. The easiest way to reproduce the issue is by swiftly hovering over tabs in the browser.

I noticed a similar behavior on the official Angular documentation page https://material.angular.io/components/form-field/overview#form-field-appearance-variants.

When I access the app without Remote Desktop, everything functions perfectly both in my app and on the Angular documentation site. It seems like there might be a rendering or display issue specific to Remote Desktop usage.

My solution was to use the fill appearance:

@NgModule({
  providers: [
    {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'fill'}}
  ]
})