I have a question regarding the Angular Material Sidenav component. I noticed that in the code below, when I increase the border-radius property to a certain value, the element seems to disappear.
<mat-drawer-container class="example-container">
<mat-drawer mode="side" opened>
Drawer content <br />
</mat-drawer>
<mat-drawer-content
style="
border-radius: 0px; // <-- increase this value to see effect
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
background-color: rgb(255, 200, 200);
"
>Main content</mat-drawer-content>
</mat-drawer-container>
(content visible without border radius)
(content disappears with border radius)
Here is the Stackblitz link for testing: https://stackblitz.com/edit/7swnhp?file=src%2Fexample%2Fsidenav-drawer-overview-example.html
I've checked the DOM and can see the element there, but it's not visible. There don't seem to be any specific hiding styles applied, so I'm unsure why this is happening.