html - mix-bland-mode 属性阻止了 Google Chome 中的完全 3D 变换

Question

我在 Google Chrome 中遇到了一个非常奇怪的错误！

如果我在 en 元素上使用 mix-blend-mode 属性，那么如果我应用 transform: translateZ(50px); 到它下面的元素，它不起作用！

请看这个：

    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 > params.maxRotateDegreeX) {
            ax = params.maxRotateDegreeX;
          } else if (ax < -params.maxRotateDegreeX) {
            ax = -params.maxRotateDegreeX;
          }

          if (ay > params.maxRotateDegreeY) {
            ay = params.maxRotateDegreeY;
          } else if (ay < -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
    });

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">


  <div class="section">
    <div class="card">
      <div class="card-content">
        <h1>Just hover around</h1>
        <p><small>by <a href="#." target="_blank">Ershad</a></small></p>
        <p class="related"><strong>This has been done using TweenMax </strong></p>
      </div>
    </div>
  </div>

  <h1 class="mix-blend-overlay">Ershad</h1>

  <div class="section">
    <div class="card">
      <div class="card-content">
        <h1>Just hover around</h1>
        <p><small>by <a href="#." target="_blank">Ershad</a></small></p>
        <p class="related"><strong>This has been done using TweenMax </strong></p>
      </div>
    </div>
  </div>

</div>

该演示中的 2 张卡片具有完全相同的结构、样式和 js 功能，但后者无法正常工作，因为具有 mix-blend-property 的元素在它之前，尝试将其删除，它工作得很好！！

我怎么解决这个问题？！