Angular Material overlay elements (dialogs and dropdowns) are not visible in OpenReplay session recordings.

Hi everyone,
I’m integrating OpenReplay into my Angular application, and I’ve encountered an issue with Angular Material components. Specifically, dialogs (<mat-dialog> ), dropdowns (<mat-select> ), and other floating elements are not properly visible in the session recordings.
I’ve noticed that these elements are rendered outside the main DOM tree (app-root ) in a specific container called cdk-overlay-container . While they work perfectly in my application and appear on top of the content as expected, in OpenReplay recordings, these elements seem to be hidden or not captured correctly.
I tried adjusting styles like z-index and moving the cdk-overlay-container inside the app-root hierarchy, but while this improves visibility in the recordings, it causes functionality issues in the application itself.
Is there a specific configuration in OpenReplay to correctly capture these floating Angular Material elements? Or do you have any recommended strategies to handle this scenario?
Thanks so much for your help!

We don’t have much experience with angular material to be honest, but in general all replays are recorded as collection of html dom mutations and then replayed back in your browser. When you say that z-index helps, does it means that it fixes the problem with replay itself? Have you tried looking into replay structure to see if maybe some styles/css/modifiers are missing? also just to note there is some issues with transitions made via js animations api (you can read more: Bug with JavaScript Animations (Ionic modals) · Issue #2560 · openreplay/openreplay · GitHub) ), so this can be related as well.So in short, if you can check replay structure and network logs to see if replay have all related styles and they are loading correctly (in chrome they will probably show up as collection of requests inside iframe in request list), this can help to see where the issue is.