Search code examples
html5-videocss-transitionsabsolute

CSS transitions + absolutely positioned HTML5 video + poster cause flickering

I have a very specific scenario which I spent a decent amount of time replicating in an MCVE. As far as I can tell, these are the requirements:

  • Something on the page animates using the standard CSS transition property (not transform)
  • The HTML5 video has a poster that I provide with a url (the video still generates its own poster from the first frame anyway)
  • The video is absolutely positioned (used to hack a scaleable ratio)

I'm using Chrome 50 on Mac OS, but this issue has been duplicated on Windows. It does not appear to be an issue in Firefox or Safari on Mac OS.

Here is a JSFiddle illustrating the problem. Notice how when you hover over the div that says "Hover," the video switches between my poster and its own auto-generated poster. This only appears to occur before the video is played.

.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>

Why is this happening? If I can't easily fix this, what would be the best way to maintain the scaleable aspect ratio of a video on a page that has a CSS transition?

Solution

  • This appears to be a bug in Chrome. I have submitted a Chromium bug report (Issue 617642) in hopes that it will be fixed.

    In the meantime, I discovered that this issue only occurs if the element with the transition effect appears earlier in the HTML than the video. Using flex-direction: row-reverse or flex-direction: column-reverse I can switch the order of some elements in the HTML and again in the CSS so they appear in the right place but the transition does not affect the video thumbnail.

    UPDATE: As of Chrome 77, this issue appears to be fixed.