css - 在 native 全屏模式下，HTML5 视频不会最大化超出容器尺寸

Question

我遇到了一个非常有趣的跨浏览器 HTML5/CSS 问题:每当有一个带有 -webkit-animation-fill-mode: both; 的动画附加到包含 HTML5 video 的 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-index 和其他页面元素的问题，即全屏模式根本不是全屏。另请注意，为了简单起见，示例中的动画是原始的。

删除 -webkit-animation-fill-mode 解决了一切。我不确定这是错误还是我无法理解的一些模糊的 HTML/CSS 行为，但问题是:

有没有办法实现正确的全屏模式并保留 -webkit-animation-fill-mode 属性？全屏激活后，可能可以通过 JS 删除“.animated”类，但我正在寻找更清洁的解决方案。注意:包含元素有一定的尺寸(它是一个模态窗口)，有边距并被其他元素包围，即我们不能只将它的宽度/高度设置为 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