材质扩展面板动画期间，Angular Material Anchor文本会更改字体粗细

Question

在材质扩展面板上单击时，我的锚文本的字体粗细在动画过程中被更改。使用材料表格时，我注意到类似的行为。一旦有了mat-input元素，文本的字体粗细就会有所不同。但是chrome开发工具显示的值相同。

在这里，我发布了一个演示应用程序来展示我的问题： https://kolomu.github.io/pages-material-sidenav/

当点击“这是一个测试”时，注意动画中页脚中的链接的字体粗细。

我注意到只有在链接颜色为红色而背景为黑色时才会发生这种情况。如果锚点颜色是白色背景，则不会注意到字体粗细的变化。

这是存储库：https://github.com/kolomu/ng-mat-demo

应用程序的HTML结构如下：

<mat-sidenav-container>
  <mat-sidenav role="navigation">
   Test
  </mat-sidenav>

  <mat-sidenav-content >
      <main>
          <router-outlet></router-outlet>
      </main>
      <app-footer></app-footer>
  </mat-sidenav-content>

</mat-sidenav-container>

styles.scss的CSS非常有限

@import "./vars";

html,
body {
    height: 100%;
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family: Roboto, "Helvetica Neue", sans-serif;
}

h4 {
    line-height: 2em;
}

.mat-drawer-container {
    height: 100%;
}

.link {
    color: $link-color;
    text-decoration: none;
}

.section {
    padding: $padding-sm;
}

具有垫子扩展面板的FAQComponent也很简单：

<mat-accordion>

    <mat-expansion-panel>
        <mat-expansion-panel-header>
            This is a test
        </mat-expansion-panel-header>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia perspiciatis obcaecati aspernatur,
            nobis repudiandae adipisci, sunt atque, ab illum ut recusandae cumque vero quam doloribus suscipit cum
            accusamus veniam exercitationem.</p>
    </mat-expansion-panel>


</mat-accordion>

脚：

<footer>
    <div class="wrapper">
      <div class="about section">
        <h4>Über</h4>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias officia cupiditate doloremque vero sint sit
          repellendus animi. Fugit enim libero suscipit, odio quia illo consectetur laudantium, est tempore temporibus
          accusantium!Odit sint quos nihil, molestiae ipsam delectus, eos vel, veritatis eum ea dignissimos.</p>
      </div>
  
      <div class="contact section">
        <h4>Kontakt</h4>
        <div class="grid-wrapper">
          <div class="icon">
            <i class="material-icons">mail_outline</i>
          </div>
          <div class="icon-section">
            <a href="mailto:info@placeholderabc.de" class="link">info@placeholderabc.de</a>
          </div>
  
          <div class="icon">
            <i class="material-icons l-place">place</i>
          </div>
  
          <div class="icon-section">
            <address>
              Demo Address<br>
              Street 5<br>
              D - 12345 Nice
            </address>
          </div>
  
        </div>
      </div>
  
      <div class="links section">
        <h4>Links</h4>
        <ul>
          <li><a href="#" class="link">Sample Link1</a></li>
          <li><a routerLink="/kontakt" class="link">Kontaktformular</a></li>
          <li><a routerLink="/datenschutz" class="link">Datenschutzerklärung</a></li>
          <li><a routerLink="/impressum" class="link">Impressum</a></li>
        </ul>
      </div>
  
    </div>
  </footer>

@import "../../../vars";

footer {
    background-color: $dark-color-1;
    color: $white-color-1;

    h4 {
        text-transform: uppercase;
    }

    .wrapper {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    .about p,
    .contact address,
    .links ul {
        line-height: 1.4em;
    }

    .contact {
        .grid-wrapper {
            display: grid;
            grid-template-columns: 40px auto;
        }

        .icon {
            display: grid;
            align-items: center;
        }
    }

    .links {
        ul {
            list-style-type: none;
        }
    }
}

@media (min-width: map-get($media-breakpoints, "sm")) {
    footer .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .about {
        grid-column: 1 / -1;
    }
}

@media (min-width: map-get($media-breakpoints, "lg")) {
    footer .wrapper {
        max-width: 1090px;
        margin: 0 auto;
        justify-content: space-between;
        grid-template-columns: repeat(3, 300px);
    }

    .about {
        grid-column: auto;
    }
}