title: CSS - Using mix-blend-mode in Chrome over video, blend applied to element above
body: <p>I have a block of HTML for showing an image/video with a pattern and text on top of it:</p>
  
  <pre><code>&lt;div id="video_block"&gt;
      &lt;img src="montage_still.jpg" class="spacer_image"&gt;
      &lt;img src="montage_still.jpg" class="background_image"&gt;
      &lt;video width="100%;" height="auto;" muted="" preload="" autoplay=""&gt;
          Sources
      &lt;/video&gt;
      &lt;div class="overlay_pattern yellow"&gt;&lt;/div&gt;
      &lt;div class="overlay_text center_middle_text"&gt;Pride&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>More simply, the layers are:</p>
  
  <ul>
  <li>Spacer Image <em>(to define space, not visible)</em></li>
  <li>Image</li>
  <li>Video</li>
  <li>Overlay Pattern <em>(yellow blocks set to the background)</em></li>
  <li>Overlay Text <em>(white text placed above everything else)</em></li>
  </ul>
  
  <p>What I am aiming for is the following, which occurs in most browsers over both the image and the video (when loaded/visible):</p>
  
  <p><a href="https://i.stack.imgur.com/ieLgt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ieLgt.png" alt="Overlay elements working as expected."></a></p>
  
  <p>However, when using Chrome (Mac, 45.0.2454.85, 64-bit) and only when the video is visible, I get the following: </p>
  
  <p><a href="https://i.stack.imgur.com/NQYKT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NQYKT.png" alt="Blend of pattern overlay is also applied up to the overlay text."></a></p>
  
  <p>This seems odd, given that when I read, "<a href="https://css-tricks.com/almanac/properties/m/mix-blend-mode/" rel="nofollow noreferrer">the mix-blend-mode property defines how an element’s content should blend with its background</a>," I assume that the pattern overlay would blend down with the image/video, leaving the text above it alone.  However, it appears that Chrome is giving the text overlay div the same blend effect; both elements change in unison when I change the blend mode to anything else.</p>
  
  <p>The CSS:</p>
  
  <pre><code>img.background_image,
  div.video_block video {
      position:absolute;
      //more styles
  }
  
  div.overlay_pattern {
      background-color: transparent;
      background-image: none;
      height: 200vh;
      left: 0;
      mix-blend-mode: overlay;
      pointer-events: none;
      position: absolute;
      top: 0;
      width: 100%;
  }
  
  div.overlay_pattern.yellow {
      background: url("yellow_pattern.png") repeat scroll;
  }
  
  div.overlay_text {
      color: #ffffff;
      font-family: "Gotham A","Gotham B";
      font-size: 8em;
      font-style: normal;
      font-weight: 900;
      text-shadow: 3px 3px 2px rgba(60, 60, 60, 0.5);
      text-transform: uppercase;
  }
  
  div.center_middle_text {
      left: 0;
      margin: 0 10%;
      position: absolute;
      text-align: center;
      top: 50%;
      transform: translateY(-50%);
      width: 80%;
  }
  </code></pre>
  
  <p>Any advice to get consistent behavior for Chrome? (Is this is a bug, perhaps?)</p>