Angular Material Toolbar becomes transparent when it scrolls over Angular Material Tabs group and its content. Here is a screenshot:

My app is using the Material Design 3 specification. This is unexpected behaviour and I’ve only noticed it when the toolbar scrolls over the tab group and its content. Is it a bug with the MD3 design or my setup?

Toolbar html and scss

<mat-toolbar class="nav-menu" role="heading">
... buttons
</mat-toolbar>

.nav-menu {
    display: flex;
    position: fixed;
    z-index: 1;
    top: 0;
}

Tab control

<mat-tab-group>
    <mat-tab label="Average">
        <ng-template matTabContent>
            <app-something></app-something>
        </ng-template>
    </mat-tab>
    <mat-tab label="Career focus">
        <ng-template matTabContent>
            <app-whatever></app-whatever>
        </ng-template>
    </mat-tab>
    <mat-tab label="Age analysis">
        <ng-template matTabContent>
            <app-really></app-really>
        </ng-template>
    </mat-tab>
</mat-tab-group>

Is it a bug with the MD3 design or my setup?