Angular Текст привязки материала меняет шрифт во время анимации панели расширения мата

Question

При нажатии на панель расширения материалов вес шрифта моего якорного текста изменяется во время анимации. Я заметил подобное поведение при использовании материальных форм. Как только у меня появился элемент mat-input, шрифт текста стал другим. Однако chrome dev-tools показывают те же значения.

Здесь я опубликовал демонстрационное приложение, чтобы продемонстрировать свою проблему: https://kolomu.github.io/pages-material-sidenav/

Обратите внимание, как ссылки в нижний колонтитул имеет более легкий шрифт во время анимации при нажатии на «Это тест».

Я заметил, что это происходит только тогда, когда цвет ссылки КРАСНЫЙ, а фон черный. Если цвет привязки находится на белом фоне, вы не заметите изменения веса шрифта.

Here is the repository: 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>

style.s css очень ограничен 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, тоже просто:

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