Spinner and Popups not working in browser native full screen feature

Question

Spinners and popups are not working while entering into the browsers native full screen feature. (.Net Blazor)

If we request fullscreen for the below objects, everything goes fine as usual:

const rootScrnElemt = document.querySelector("html");
const rootScrnElemt = document.querySelector("body");

but, if we use below selector using @id attribute instead of element, above said issues are happening.

const rootScrnElemt = document.querySelector("#viewerid"); -- Object captured using ID

Code:

const rootScrnElemt = document.querySelector(toggleElement);
if (rootScrnElemt) {
    if (rootScrnElemt.requestFullscreen) {
        rootScrnElemt.requestFullscreen();
    }
    else if (rootScrnElemt.mozRequestFullScreen) {
        rootScrnElemt.mozRequestFullScreen();
    }
    else if (rootScrnElemt.webkitRequestFullscreen) {
        rootScrnElemt.webkitRequestFullscreen();
    }
    else if (rootScrnElemt.msRequestFullscreen) {
        rootScrnElemt.msRequestFullscreen();
    }
}

Note: We used the bootstrap model popups

If you have insights, suggestions, or solutions related to above issue, your assistance would be immensely appreciated.

I believe this issue is related on z-index, tried manual updates on z-index, but cause more complex code to work with, if we go on that path