Firefox有時無法完全顯示全屏圖像

Question

目前，我正嘗試通過javascript全屏顯示圖像。 （全屏API- https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API ）

JavaScript代碼：

var enterFullscreen = 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 {
    noFullscreenSupport();
}

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 {
    noFullscreenSupport();
}

var initFullScreenButtons = function() {
$('.fullScreenButton').each(function(e) {
    $(this).bind('click', function() {
        if((window.innerWidth === screen.width && window.innerHeight === screen.height) || (window.fullScreen)) {
            exitFullscreen();
        } else {
            enterFullscreen(document.documentElement);
        }   
    });
});

我得到了全屏按鈕，並將它們綁定到一個單擊事件，該事件會調用該函數進入全屏狀態。

圖片：

沒有全屏

全屏

結果是圖像有時以全屏或半全屏顯示，其中頁面背景以瀏覽器任務欄和Windows任務欄的寬度/高度顯示在頁面底部。

此外，一旦嘗試使用瀏覽器的開發人員工具，視覺錯誤就會消失。

Answer 1

我找到了解決我問題的方法。 代替傳遞document.documentElement （root-element），我必須傳遞document.body （body-element）到函數。