mix-bland-mode property prevents fully 3D transforms in Google Chome - html

Question

I've encountered a very strange bug in Google Chrome!
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!
Please see this:
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 Ershad</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 Ershad</small></p>
<p class="related"><strong>This has been done using TweenMax </strong></p>
</div>
</div>
</div>
</div>
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!!
How can I solve this problem?!