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

Question

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

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

我在 Mac OS 上使用 Chrome 50，但这个问题在 Windows 上重复出现。 Mac OS.

上的 Firefox 或 Safari 似乎不是问题

这里 JSFiddle 说明了这个问题。请注意，当您将鼠标悬停在显示 "Hover," 的 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

这似乎是 Chrome 中的错误。我已经提交了 Chromium bug report (Issue 617642) 希望它能得到修复。

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

更新：自 Chrome 77 起，此问题似乎已解决。

Answer 2

页面上带有 transitions/translates 的这种情况通常可以通过对父元素或子元素使用 "magic" transform: translateZ(0) 来解决（视情况而定）。

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

就足够了

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

应用解决方案jsFiddle

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

CSS transitions + absolutely positioned HTML5 video + poster cause flickering

absolute

html5-video

css-transitions