由于 Chrome 中的 Webkit 全屏导致布局变形

Question

我对两个嵌套的全屏元素有疑问。当用户进入外层div的全屏模式，然后进入嵌套<video>的全屏模式时，站点的状态应该与用户只进入全屏模式的状态相同外<div>。只有在 Internet Explorer 和 Firefox 中它才能正常工作。

在 Google Chrome 中，布局在离开嵌套 <vidoeo> 的全屏模式后中断。似乎其中一个元素的全屏模式未完全取消或两种全屏模式冲突。

要重现此问题，请使用按钮退出全屏，而不是使用 ESC 键。

参见jsFiddle。

function requestFullScreen() {
    var element = document.getElementById('fullscreen-wrapper'),
        fullscreenFunction = element.webkitRequestFullScreen || element.mozRequestFullScreen || element.requestFullScreen || element.msRequestFullScreen;

    fullscreenFunction.call(element);
}
function exitFullScreen() {
    var element = document,
        fullscreenFunction = fullscreenFunction = element.webkitExitFullscreen || element.mozCancelFullScreen || element.exitFullscreen || element.msExitFullscreen;

    fullscreenFunction.call(element);
}

document.querySelector('btn-fullscreen')[0].addEventListener('click', requestFullScreen);
document.querySelector('btn-exit')[0].addEventListener('click', requestFullScreen);

<div id="fullscreen-wrapper" class="wrapper">
    <button class="btn-fullscreen">enter fullscreen</button>
    <button class="btn-exit">exit fullscreen</button>
    <video controls>
        <source type="video/mp4" src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4">
    </video>
</div>

Answer 1

这已在 Chrome 3 年前修复：https://bugs.chromium.org/p/chromium/issues/detail?id=685620

由于 Chrome 中的 Webkit 全屏导致布局变形

Disfigured Layout due to Webkit Full-screen in Chrome

javascript

google-chrome

html5-video