Currently, my goal is to showcase an image in fullscreen mode using JavaScript. (Refer to the Fullscreen API - https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
JavaScript snippet:
var requestFullscreen = function(el) {
if(el.requestFullscreen) {
el.requestFullscreen();
} else if(el.msRequestFullscreen) {
el.msRequestFullscreen();
} else if(el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if(el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else {
handleNoFullscreenSupport();
}
var exitFullscreen = function() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else {
handleNoFullscreenSupport();
}
var setupFullScreenButtons = function() {
$('.fullScreenButton').each(function(e) {
$(this).bind('click', function() {
if((window.innerWidth === screen.width && window.innerHeight === screen.height) || (window.fullScreen)) {
exitFullscreen();
} else {
requestFullscreen(document.documentElement);
}
});
});
I retrieve the fullscreen buttons and attach them to a click event which triggers the function to enter fullscreen mode.
Images:
The issue is that the image occasionally displays in fullscreen mode or in a semi-fullscreen mode where the page's background appears at the bottom, covering the browser's taskbar and windows taskbar dimensions.
Moreover, when I access the developer tools in the browser, the visual glitch disappears.