Making fullscreen using JS brings some black color

As I showed in the video, the full screen works well with F11 but when I make it from JS, I see some black background at the top. I’m not sure what is the difference here with F11 and JS.
How to fix this ?

The code used to make this work using JS is

            String javascript = "function goFullScreen(element) {\n" +
                    "  if (element.requestFullscreen) {\n" +
                    "    element.requestFullscreen();\n" +
                    "  } else if (element.mozRequestFullScreen) { // Firefox\n" +
                    "    element.mozRequestFullScreen();\n" +
                    "  } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera\n" +
                    "    element.webkitRequestFullscreen();\n" +
                    "  } else if (element.msRequestFullscreen) { // IE/Edge\n" +
                    "    element.msRequestFullscreen();\n" +
                    "  }\n" +
                    "}\n" +
                    "goFullScreen($0);";
            element.executeJs(javascript, element);```

There was an issue in the script. This one works javascript = "function goFullScreen() {\n" + "var element = document.documentElement;" + " if (element.requestFullscreen) {\n" + " element.requestFullscreen();\n" + " } else if (element.mozRequestFullScreen) { // Firefox\n" + " element.mozRequestFullScreen();\n" + " } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera\n" + " element.webkitRequestFullscreen();\n" + " } else if (element.msRequestFullscreen) { // IE/Edge\n" + " element.msRequestFullscreen();\n" + " }\n" + "}\n" + "goFullScreen($0);";

for some reason. when I move this to an external file I’m getting error some “Unresolvable reference error- Unable to locate”

so moving with this inline js for now