仅在 Safari 中的背景视频位置不正确答案

【问题标题】：Background video out of position in Safari only仅在 Safari 中的背景视频位置不正确
【发布时间】：2015-09-03 14:25:23
【问题描述】：

仅在 Safari 中背景视频位置不正确。当我删除“顶部：50％”和“左侧：50％”时，它可以在 Safari 上运行，但位置在 Chrome 等中变得不合适。有人对如何让它在两者上工作有任何想法吗？

video { 
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url(../images/vidstill.png) no-repeat;
background-size: cover;
transition: 1s opacity;
}

【问题讨论】：

请添加您的html（重要部分）

标签： html css video safari position

【解决方案1】：

我遇到了同样的问题。让 Safari 识别“transform: translateX(-50%) translateY(-50%);”您需要添加另一行：“-webkit-transform: translateX(-50%) translateY(-50%);”

添加“-webkit”将帮助 Safari 了解您想要什么。所以它最终会是这样的：

video { 
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
background: url(../images/vidstill.png) no-repeat;
background-size: cover;
transition: 1s opacity;
}

【讨论】：