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

Question

I have a problem with two nested full-screen elements. When a user enters full-screen mode of the outer div and then enters the full-screen mode of the nested <video> , the state of the site should be the same as the user only entering fullscreen mode of the outer <div> . Only in Internet Explorer and Firefox is it working as it should.

In Google Chrome, the layout breaks after leaving full-screen mode of the nested <vidoeo> . It seems like the fullscreen mode of one of these element sis not entirely cancelled or the two full-screen modes are conflicting.

To reproduce this, exit full screen with the button, not with the ESC key.

See the 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

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