Safari在视频周围显示黑色边框

Question

我试图＆＃34;嵌入＆＃34;图像中的视频（在本例中是笔记本电脑图形中的视频）。我将图像设置为bg并使用填充将视频放在＆＃34;屏幕中＃34;区域。由于这必须是响应式的，因此正在使用基于百分比的填充。

.media > video {
  background-image: url(...);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  padding: 5% 15% 12%;
  max-width: 100%;
}

http://codepen.io/jerivas/pen/jqoVYj?editors=1100

一切都很好......除了在Safari中。出于某种原因，视频有黑色边框（有时是周围的，有时是左/右或下/上）。视频需要与笔记本电脑无缝融合，这会打破效果。

我已经尝试用JS重新计算填充，宽度和高度值，只使用整数px单位，但问题仍然存在（此部分不在笔中）。