title: CSS Blend Mode not working
body: <p>I would like to play with the CSS blend mode property but it seems like nothing is happening when I apply the rules.</p>
  
  <p>Am I doing something wrong? I have applied the isolation rule to the parent and the mix-blend-mode to the element I want to play with.</p>
  
  <p>Here's the code and a <a href="http://codepen.io/alezuc/pen/xdbLjR" rel="noreferrer">codepen example</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.day-old {
      position: relative;
      isolation: isolate;
  }
  
  .day-old:before {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 99.9%;
      height: 38px;
      content: "";
      background: rgba(0, 0, 0, 0.5);
      z-index: -1;
  }
  
  .day-old .day-row {
      opacity: 0.5;
  }
  
  .day-row {
      display: -ms-flexbox;
      display: flex;
      width: 100%;
  }
  
  .day {
      background: #f5f5f5;
      margin: 0;
  }
  
  .day span {
      display: block;
      padding: 10px;
  }
  
  .availability {
      display: flex;
      width: 100%;
      text-align: center;
       margin: 0;
  }
  
  .slot {
      display: block;
      padding: 10px 0;
      color: #3c763d;
      background: #dff0d8;
      width: 100%;
      box-shadow: -1px 0px 0px #c7d9b9 inset, 0px -1px 0px #c7d9b9 inset;
      mix-blend-mode: screen;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="day-old"&gt;
      &lt;div class="day-row"&gt;
       &lt;p class="inner day"&gt;&lt;span&gt;&lt;strong&gt;13/04&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
       &lt;p class="availability"&gt;
         &lt;span class="slot"&gt;
           &lt;strong&gt;2500&lt;/strong&gt;                                              &lt;/span&gt;
       &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
                       </code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks</p>