HTML5 视频在原生全屏模式下不会超出容器尺寸最大化

Question

我遇到了一个非常有趣的跨浏览器HTML5/CSS问题：每当有一个动画WITH-webkit-animation-fill-mode: both;附加到包含HTML5video元素的div时，该视频在原生HTML5全屏模式下不会填充整个窗口，即全屏中的视频大小将限制为父元素尺寸。

描述可能令人困惑，因此我创建了一个简化的示例：http://jsfiddle.net/7SsPa/3/embedded/result/

(注意：jsFiddle根本不允许全屏模式，但它可以理解发生了什么。要在启用全屏的情况下查看相同的代码，您可以在这里打开它：https://dl.dropboxusercontent.com/u/3635046/fullscreen.html)

我们尝试了几个JS视频播放器(video.JS、flowplayer等)，但问题都存在，与任何特定的JS库都无关。

为了让事情变得更容易，这段代码只能在webkit浏览器中使用，但我在Firefox中也有同样的行为。这种怪异超出了视频的范畴。在一个真实的网站上，我们观察到z索引和其他页面元素的问题，即全屏模式根本不是全屏模式。还要注意，示例中的动画是基元的，只是为了简单起见。

去除-webkit-animation-fill-mode可以解决所有问题。我不确定这是一个错误还是一些我无法理解的晦涩的HTML/CSS行为，但问题是：

有没有一种方法可以实现适当的全屏模式并保留-webkit动画填充模式属性？在全屏激活时，可能会通过JS删除".animated"类，但我正在寻找一个更干净的解决方案。注意：containing元素有一定的尺寸(它是一个模态窗口)，有边距，并被其他元素包围，即我们不能只将其宽度/高度设置为100%。

谢谢。

Answer 1

添加以下CSS应该可以解决这个问题：

:-webkit-full-screen-ancestor {
animation: none;
-webkit-animation-fill-mode: none;
animation-fill-mode: none;
}

通过：https://bugs.chromium.org/p/chromium/issues/detail?id=501246#c13

Answer 2

以百分比形式给出高度和宽度的尺寸。

例如：宽度：100%

Answer 3

我遇到了同样的问题，但只是在webkit浏览器中。当任何东西进入全屏时，我会给body标签指定一个特定的类，并在退出时将其删除；

$(document).on('webkitfullscreenchange', function(){
if(document.webkitFullscreenElement !== null) {
$('body').addClass('in-fullscreen');
} else {
$('body').removeClass('in-fullscreen');
}
});

现在很容易覆盖有问题的css属性；

.in-fullscreen .container {
-webkit-animation-fill-mode: none;
animation-fill-mode: none;
}