html - Z-index 和 mix-blend-mode 在 Firefox 中悬停时不能一起工作

Question

编辑：我认为这是 Mac（Catalina）上 Firefox（74.0）中的某种错误。我已经在我的 Mac 和 Macbook 上对其进行了测试，它们的行为不正确，但它在我的 PC Firefox 上运行良好。

我目前正在开发一个在图像顶部使用叠加渐变的网站。问题是当我将它们用作可点击图像的悬停元素时。它们在 Chrome、Safari 和 Opera 中工作得非常好，但在 Firefox 中就坏了。我通过检查器推断出问题是 z-index 与悬停时的混合混合模式配对有问题。是否有解决方案或解决方法可以像在 Chrome 中一样在 Firefox 中工作？这是该站点的 URL： http: //c3.abettermancc.com/

这是受影响的“方块”之一的隔离代码：

h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

a {
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  color: inherit;
  cursor: pointer !important;
}

a:hover {
  cursor: pointer !important;
}

.flex-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-shrink: 0;
}

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  flex-shrink: 0;
}

.flex-center {
  justify-content: center;
  align-content: center;
  align-items: center;
}

.four-square-wrap {
  width: 100%;
}

.four-square {
  width: 50%;
  min-height: 300px;
  height: calc(50vh - 37.5px);
  /*Half Height - Half Header Height*/
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  -o-transform-style: preserve-3d;
  -o-backface-visibility: hidden;
  -ms-transform-style: preserve-3d;
  -ms-backface-visibility: hidden;
}

.four-square h2 {
  text-transform: uppercase;
  color: #2C839A;
  letter-spacing: 2px;
  font-weight: 500;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.four-square:hover h2 {
  font-size: 30px;
  color: #ffffff;
  letter-spacing: 4px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  -o-transform-style: preserve-3d;
  -o-backface-visibility: hidden;
  -ms-transform-style: preserve-3d;
  -ms-backface-visibility: hidden;
}

.four-square:hover .img-overlay-base {
  background-color: #073038;
  opacity: 0.7;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.four-square:hover .four-square-img-overlay {
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.four-square:hover .four-square-img-overlay-dark {
  opacity: 1;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.four-square-text {
  z-index: 5;
  font-size: 20px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.cool-bg {
  display: block;
  object-fit: cover;
  z-index: -10;
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  -o-transform-style: preserve-3d;
  -o-backface-visibility: hidden;
  -ms-transform-style: preserve-3d;
  -ms-backface-visibility: hidden;
}

.img-overlay-base {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  position: absolute;
  margin: auto;
  top: 0;
  opacity: 0.5;
  z-index: 2;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  -o-transform-style: preserve-3d;
  -o-backface-visibility: hidden;
  -ms-transform-style: preserve-3d;
  -ms-backface-visibility: hidden;
}

.four-square-img-overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: auto;
  top: 0;
  mix-blend-mode: overlay;
  z-index: 4;
  opacity: 1;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7dd2ef+0,ffffff+99 */
  background: #7dd2ef;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #7dd2ef 0%, #ffffff 99%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #7dd2ef 0%, #ffffff 99%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #7dd2ef 0%, #ffffff 99%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7dd2ef', endColorstr='#ffffff', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  -o-transform-style: preserve-3d;
  -o-backface-visibility: hidden;
  -ms-transform-style: preserve-3d;
  -ms-backface-visibility: hidden;
}

.four-square-img-overlay-dark {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: auto;
  top: 0;
  z-index: 4;
  opacity: 0;
  mix-blend-mode: overlay;
  background: rgb(3, 31, 36);
  background: -moz-linear-gradient(148deg, rgba(3, 31, 36, 1) 0%, rgba(125, 210, 239, 1) 100%);
  background: -webkit-linear-gradient(148deg, rgba(3, 31, 36, 1) 0%, rgba(125, 210, 239, 1) 100%);
  background: linear-gradient(148deg, rgba(3, 31, 36, 1) 0%, rgba(125, 210, 239, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#031f24", endColorstr="#7dd2ef", GradientType=1);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  -o-transform-style: preserve-3d;
  -o-backface-visibility: hidden;
  -ms-transform-style: preserve-3d;
  -ms-backface-visibility: hidden;
}

<div class="four-square-wrap flex-wrap">

  <a href="#" class="four-square flex flex-center">

    <img src="https://i.picsum.photos/id/1074/800/800.jpg" class="cool-bg">

    <!------------------Overlay -->
    <div class="img-overlay-base">
    </div>
    <div class="hover-highlight">
    </div>
    <div class="four-square-img-overlay">
    </div>
    <div class="four-square-img-overlay-dark">
    </div>
    <!------------------Overlay END -->

    <h2 class="four-square-text">
      Sermons
    </h2>
  </a>
</div>

这就是 Chrome 中的样子（正确）

这就是 Firefox 中的样子（不正确）