Question

我有一个非常具体的场景，我花了相当多的时间在MCVE中复制。据我所知，这些是要求：

页面上的某些内容使用标准CSS transition属性设置动画（不是transform）
HTML5视频有一个poster，我提供了一个网址（视频仍会从第一帧生成自己的海报）
视频绝对定位（用于hack a scaleable ratio）

我在Mac OS上使用Chrome 50，但此问题已在Windows上重复出现。它在Mac OS上的Firefox或Safari中似乎不是问题。

这是一个说明问题的JSFiddle。请注意，当您将鼠标悬停在显示“悬停”的div上时，视频会在我的海报和自己生成的海报之间切换。这似乎只在播放视频之前发生。

.anim {
  width: 50px;
  height: 50px;
  background: grey;
  transition: all 0.2s linear;
  transform: rotate(0deg);
  color: white;
  display: flex;
  align-items: center;
  justify-content:center;
}

.anim:hover {
  background: black;
  transition: all 0.2s linear;
  transform: rotate(90deg);
}

#video-container {
  position: relative;
  height: 0px;
  padding-bottom: 56.25%; /* 16 x 9 */
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="box" class="anim">
  <div>
    Hover
  </div>
</div>
<div id="video-container">
  <video controls poster="https://pbs.twimg.com/profile_images/447374371917922304/P4BzupWu.jpeg">
    <source src="http://clips.vorwaerts-gmbh.de/VfE.webm">
  </video> 
</div>

为什么会这样？如果我无法轻易解决这个问题，那么在具有CSS过渡的页面上保持视频的可缩放纵横比的最佳方法是什么？

Answer 1

在页面上进行转换/翻译的情况下，您通常可以使用“magic”transform: translateZ(0)解决父级或子级元素（取决于具体情况）。

在您的情况下，将此转换添加到#video-container：

就足够了

#video-container {
  position: relative;
  height: 0px;
  padding-bottom: 56.25%; /* 16 x 9 */
  transform: translateZ(0);
}

应用解决方案jsFiddle

Answer 2

这似乎是Chrome中的一个错误。我提交了一份Chromium bug report (Issue 617642)，希望能够修复。

与此同时，我发现仅当具有过渡效果的元素出现在HTML中比视频早出现时才会出现此问题。使用flex-direction: row-reverse或flex-direction: column-reverse我可以在HTML中再切换一些元素的顺序，然后再在CSS中切换，以便它们显示在正确的位置，但转换不会影响视频缩略图。

CSS转换+绝对定位的HTML5视频+海报导致闪烁

2 个答案: