Angular Material 浮动标签在悬停时消失或被切断

Question

如果不需要的话，我不想禁用浮动标签，但它们对我来说表现不佳。当我将鼠标悬停在它们上方时，很多时候浮动标签要么完全消失，下半部分将被切断，或者（更罕见）上半部分将被切断。我尝试调整 mat-form-field 中各种元素的 z-index 和溢出可见性，但没有成功。

不幸的是，我什至无法在 StackBlitz 上准确地重现该问题。 如果上面的元素和表单字段之间没有顶部填充，我可以重现标签顶部被切断的情况，但正如您在下面看到的，有足够的顶部填充，这不应该成为问题。此外，由于标签在底部被切断或完全消失，我不确定父元素填充是否是问题所在。

不确定这是否有帮助，因为它只是一个标准的 mat-form-field，但这是代码：

<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>

表单字段本身没有额外的样式。表单字段的父 div 将网格布局应用于其子项，但此问题也会发生在表单字段也位于 Flex 布局内的另一个组件上。

Answer 1

通过远程桌面访问我的 Angular 应用程序时，我遇到了类似的问题，标签被切断或消失。重现问题的最简单方法是快速将鼠标悬停在浏览器中的选项卡上。

我在 Angular 官方文档页面上注意到类似的行为 https://material.angular.io/components/form-field/overview#form-field-appearance-variants。

当我在没有远程桌面的情况下访问应用程序时，我的应用程序和 Angular 文档网站上的一切功能都完美运行。似乎可能存在特定于远程桌面使用的渲染或显示问题。

我的解决方案是使用填充外观：

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