javascript - 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);
        }   
    });
});

我得到全屏按钮并将它们绑定(bind)到一个单击事件，该事件调用函数进入全屏。

图片:

Without fullscreen

Fullscreen

导致图片有时全屏或半全屏显示，其中页面背景显示在页面底部，宽度/高度为 browser-taskbar 和 windows-taskbar。

此外，一旦我尝试使用浏览器的开发人员工具，视觉错误就会消失。

Answer 1

我找到了解决问题的方法。我必须将 document.body(正文元素)传递给函数，而不是传递 document.documentElement(根元素)。