I have several modals within my app that are conditionally displayed. In most cases, the condition is bound to a variable value that I set manually upon an action (like clicking a button). I also have one set based on browser breakpoint (if mobile, show).
I’m seeing undesirable behavior on app load where each of these modals flashes visible for a moment before hiding again. It’s quite apparent for the modals that include a backdrop, as it changes the color of the full screen for a moment.
I can tell it’s not a matter of my variables being unset/not properly read as the actual contents of the modals are not shown, just the backdrop - ex. one modal is a full page loader - the backdrop appears, but the loader animation does not. This tells me fullPageLoader = false, for instance, is properly set.
2 cases where I’m seeing different issues:
On mobile, I’m seeing the backdrop of my modals flash briefly before re-hiding, thus changing the color of the screen for a short, but noticeable moment.
RESOLVED MOBILE ISSUE: It seems the issue on mobile was resolved when I removed mobile-specific settings on the modal transition. i.e. I had previously removed the modal transition on mobile only. When clearing that setting (returning it to inherit transition settings from desktop), this issue disappeared.
The desktop issue relates to the modal that shows based on breakpoint (condition below) - it is only supposed to be visible on mobile.
On app load in browser, I see the modal’s contents briefly in the top-left corner of the screen before it hides itself, image below:
Thanks for any insight!