Angular: strange mat-sidenav-container behaviour in Firefox

Firefox does not "accept" the width set in mat-sidenav when I first open the website. Only after reloading it adjusts the mat-sidenav how it should be.

CSS:

mat-sidenav {
    padding: 16px;
    width: 100px;
    background-color: blue;
}

html

<mat-sidenav-container>
    <mat-sidenav #sidenav  fixedInViewport="true" opened="true">
        <mat-nav-list>

        <a mat-list-item routerLink="/home" routerLinkActive="active-list-item">
            <mat-icon matListIcon>home</mat-icon>
            <h3 matLine>Home</h3>
        </a>
        <a mat-list-item routerLink="/account" routerLinkActive="active-list-item">
            <mat-icon matListIcon>folder_open</mat-icon>
            <h3 matLine>Accounts</h3>
        </a>
        <a mat-list-item routerLink="/about" routerLinkActive="active-list-item">
            <mat-icon matListIcon>info</mat-icon>
            <h3 matLine>About</h3>
        </a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

If I remove the width everything works fine. I have no problems with chrome or edge.

I already tried the autosize parameter in mat-sidenav-container which solves the problem but brings similar strange behaviours when adding hover on mat-sidenav.

This is how it should look like: