title: mix-bland-mode property prevents fully 3D transforms in Google Chome
body: <p>I've encountered a very strange bug in Google Chrome!</p>
  
  <p>if I use mix-blend-mode property on en element then if I apply transform: translateZ(50px); to an element below it, it doesn't work!</p>
  
  <p>Please see this:</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-js lang-js prettyprint-override"><code>    function threeD_hover(params) {
        // Get the elements inside to be animated ...
        var el = params.parent.find(params.element),
          // defining the factor to be whether concave or covex style ...
          factor = 1;
  
        if (params.convex) {
          factor = -1;
        }
  
        // Set the nessecory styles
        TweenMax.set(el, {
          transformPerspective: params.perspective,
          rotationY: 0.01,
          rotationX: 0.01,
          "transform-style": "preserve-3d",
          "backface-visibility": " hidden"
        });
  
        // Thee core function fo each of the elements inside ...
        el.each(function(index, el) {
          var $this = $(this);
  
          function core_func(e) {
            // Defining the degrees ..
            var ax = params.xSensitivity * (($this.offset().left + ($this.outerWidth() / 2)) - e.pageX) / 200,
              ay = params.ySensitivity * (($this.offset().top + ($this.outerHeight() / 2)) - e.pageY) / 200;
  
            // Setting the max deg amount ...
            if (ax &gt; params.maxRotateDegreeX) {
              ax = params.maxRotateDegreeX;
            } else if (ax &lt; -params.maxRotateDegreeX) {
              ax = -params.maxRotateDegreeX;
            }
  
            if (ay &gt; params.maxRotateDegreeY) {
              ay = params.maxRotateDegreeY;
            } else if (ay &lt; -params.maxRotateDegreeY) {
              ay = -params.maxRotateDegreeY;
            }
  
            var dx = (-factor) * ax,
              dy = factor * ay;
            // Animating ...
            TweenMax.to($this, params.movementTime, {
              rotationY: dx,
              rotationX: dy,
              ease: params.easing
            });
          }
          if (!params.mouseSensitiveArea) {
            params.mouseSensitiveArea = params.parent;
          }
          // mosuse move on canvas ..
          params.mouseSensitiveArea.on("mousemove", core_func);
        });
      }
      threeD_hover({
        parent: $(".section"),
        element: $(".card"),
        // convex: true, // if not set it is false or concave
        maxRotateDegreeX: 30,
        maxRotateDegreeY: 30,
        xSensitivity: 5, // Min: 1  |  Max: 10
        ySensitivity: 10, // Min: 1  |  Max: 10
        perspective: 1000,
        // mouseSensitiveArea: $window, // if not set it's the parent element
        easing: Power4.easeOut,
        movementTime: 1
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
    background-image: url("http://www.intrawallpaper.com/static/images/background-wallpapers-26_HgdHzBm.jpg");
    font-family: "Playfair Display", georgia, serif;
  }
  
  .mix-blend-overlay {
    mix-blend-mode: overlay;
    color: #fff;
    text-align: center;
  }
  
  .section {
    padding: 20px 0;
    display: block;
  }
  
  .card {
    pointer-events: none;
    padding: 20px;
    background: white;
    border-radius: 5px;
    width: 400px;
    height: 150px;
    margin: auto;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    display: flex;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    position: relative;
  }
  
  .card-content {
    margin: auto;
    text-align: center;
    transform-style: preserve-3d;
  }
  
  h1 {
    transform: translateZ(100px);
  }
  
  p {
    transform: translateZ(50px);
    display: block;
  }
  
  p.related {
    transform: translateZ(80px);
    font-style: italic;
  }
  
  a {
    color: #69c6b8;
    pointer-events: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="parent"&gt;
  
  
    &lt;div class="section"&gt;
      &lt;div class="card"&gt;
        &lt;div class="card-content"&gt;
          &lt;h1&gt;Just hover around&lt;/h1&gt;
          &lt;p&gt;&lt;small&gt;by &lt;a href="#." target="_blank"&gt;Ershad&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
          &lt;p class="related"&gt;&lt;strong&gt;This has been done using TweenMax &lt;/strong&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;h1 class="mix-blend-overlay"&gt;Ershad&lt;/h1&gt;
  
    &lt;div class="section"&gt;
      &lt;div class="card"&gt;
        &lt;div class="card-content"&gt;
          &lt;h1&gt;Just hover around&lt;/h1&gt;
          &lt;p&gt;&lt;small&gt;by &lt;a href="#." target="_blank"&gt;Ershad&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
          &lt;p class="related"&gt;&lt;strong&gt;This has been done using TweenMax &lt;/strong&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The 2 Cards on that demo have exactly the same structure, style and js function yet the latter won't work properly because and element with mix-blend-property is before it, try to remove it and it works just fine!!</p>
  
  <p>How can I solve this problem?! </p>