title: Chrome issue with background-attachment fixed and position fixed elements
body: <p>I've had this issue for a while and it seems to be a Chrome redraw bug that hasn't been fixed. So I'm looking for any stop-gap fixes.</p>
  <p>The main issue is that when an element on the page has a background image that uses:</p>
  <pre><code>background-attachment: fixed;
  </code></pre>
  <p>If another element is fixed and has a child video element it causes the element with the background image to disappear.</p>
  <p>Now it works fine in Safari (and Firefox and IE) so it's not exactly a webkit issue. I've applied several properties that have been suggested to no avail.</p>
  <pre><code>-webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  </code></pre>
  <p><a href="http://codepen.io/of6/full/geDhC" rel="noreferrer">Initial Demo</a></p>
  <p>Currently my solution is just to target the elements with a fixed bg image via a media query and just turn off the fixed background property.</p>
  <pre><code>@media screen and (-webkit-min-device-pixel-ratio:0) {
  background-attachment: scroll;
  }
  </code></pre>
  <p><strike>Any ideas?</strike></p>
  <h1>Update</h1>
  <p><strike><a href="http://codepen.io/of6/full/leBpz" rel="noreferrer">Working Demo</a> thanks to Daniel.</strike></p>
  <h1>Update 2</h1>
  <p><a href="http://codepen.io/of6/pen/dorPRX" rel="noreferrer">Better demo!</a></p>
  <p>Shoutout to <a href="https://stackoverflow.com/users/4660791/somesayinice">somesayinice</a> and <a href="https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property" rel="noreferrer">FourKitchens blog post</a></p>