Flickering in mat-sidenav-container

I use a mat-sidenav-container. The sidenav is open and mode is side, so it is visible right from the start. The issue is that the content of sidenav-content flickers after loading.

Upon investigation, I found that the width of the sidenav-content changes shortly after the view is displayed once, e.g. from 1000px to 960px. That happens, when the width of the sidenav is set to "auto". When I set the width to a fixed value, the flickering vanished.

My conclusion is that the sidenav has some initial value but that value changes, once the browser knows the required width. During width-calculation, the sidenav-content has already started rendering.

My questions are:

• Is my observation and conclusion correct?
• What is the best way to handle that issue?

Below code and template:


export class AppComponent implements OnInit, AfterViewInit {
showToolbar = signal(false)

@ViewChild('innerDiv') innerDiv: ElementRef<HTMLDivElement> | undefined;

ngOnInit(): void {
setTimeout(() => {
this.showToolbar.set(true);
});
}

ngAfterViewInit(): void {
console.log('afterViewInit initial width:', this.innerDiv?.nativeElement.offsetWidth);

setTimeout(() => {
console.log('width after Timeout', this.innerDiv?.nativeElement?.offsetWidth);
}, 1000);
}

}

<div class="root">
<mat-sidenav-container class="sidenav-container">
<mat-sidenav-content>
<div #innerDiv class="inner-container">
Inner container
</div>
</mat-sidenav-content>
<mat-sidenav class="sidenav" [mode]="'side'" position="end" [opened]="true" style="width: auto;">
@if (showToolbar()) {
<mat-toolbar class="toolbar">
<span>Settings</span>
<button class="fx-fill" mat-icon-button>
<mat-icon>close</mat-icon>
</button>
</mat-toolbar>
}
<div>Sidenav</div>
</mat-sidenav>
</mat-sidenav-container>
</div>

Continue reading...