我遇到了一个非常有趣的跨浏览器 HTML5/CSS 问题：每当有动画时-webkit-animation-fill-mode: both;附加到包含 HTML5 的 DIVvideo元素，该视频在原生 HTML5 全屏模式下不会填满整个窗口，即全屏下的视频大小将限制为父元素尺寸。
描述可能会令人困惑，所以我创建了一个简化的示例：http://jsfiddle.net/7SsPa/3/embedded/result/ http://jsfiddle.net/7SsPa/3/embedded/result/
（注意：jsFiddle 根本不允许全屏模式，但它可以让您了解发生的情况。要查看启用全屏的相同代码，您可以在此处打开它：https://dl.dropboxusercontent.com/u/3635046/fullscreen.html 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%。
谢谢。
添加以下 CSS 应该可以解决这个问题：
:-webkit-full-screen-ancestor {
animation: none;
-webkit-animation-fill-mode: none;
animation-fill-mode: none;
}
Via: https://bugs.chromium.org/p/chromium/issues/detail?id=501246#c13 https://bugs.chromium.org/p/chromium/issues/detail?id=501246#c13
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
