Safari中多余的spaceabove/belowHTML5视频怎么去掉？

Question

我在 Safari（最新版本、桌面和移动设备）中看到一个奇怪的错误（仅），其中添加了额外的 space above/below 和 HTML5 视频。在某些情况下这可能没问题，但在我的情况下，它揭示了一个背景图像被用来解决 IE video/poster 错误。

我倾向于认为这是一个 Safari 错误，就好像我在开发工具中或使用 JavaScript 切换各种 CSS 属性一样，问题就消失了。 JS 方法可能可能是一个解决方案，但用户必须忍受无样式内容的闪现，我更愿意在 CSS 处解决或更正问题等级。（我尝试了各种解决方法：设置视频高度，更改视频显示）

这是相关的HTML：

<section class="series" style="display: block;">
  <video autoplay="" class="series-video series-video-desktop" loop="" muted="" playsinline="" poster="data:image/gif,AAAA" src="https://iandevlin.com/examples/speechapi-video/video/big-buck-bunny.mp4"
    style="background-image: url(http://fillmurray.com/1024/768);"></video>
</section>

... 和 CSS:

section {
  display: block;
  min-height: 100%;
  width: 100%;
}

video {
  background: none no-repeat 50% 50% transparent;
  background-size: contain;
  display: inline-block;
  height: auto;
  width: 100%;
}

此外，FWIW，这是我的 JS 修复：

window.addEventListener('load', function () {
  var xs = document.querySelectorAll('.series');
  [].slice.call(xs).forEach(function (x) {
    // doing this via CSS has no effect
    x.style.setProperty('display', 'block');
  });
});

JSFiddle

Answer 1

我能够通过将 width 替换为 min-width 和 max-width:

来解决上述问题

video {
  background: none no-repeat 50% 50% transparent;
  background-size: contain;
  display: inline-block;
  height: auto;
  /* width: 100%; */
  min-width: 100%;
  max-width: 999px;
}

Updated Fiddle

Safari中多余的spaceabove/belowHTML5视频怎么去掉？

How can the extra space above/below HTML5 video in Safari be removed?

html

css

safari

mobile-safari