Z-index и mix-blend-mode не работают вместе при наведении на Firefox

Question

РЕДАКТИРОВАТЬ: Я думаю, что это какая-то ошибка в Firefox (74.0) на Ма c (Каталина). Я проверил его как на Ma c, так и на Macbook, и они ведут себя некорректно, но он отлично работает на моем P C Firefox.

. В настоящее время я разрабатываю сайт, который использует градиенты наложения на верх изображений. Проблема в том, когда я использую их как элементы для наведения изображения для кликабельного изображения. Они отлично работают в Chrome, Safari и Opera, но ломаются в Firefox. Через инспектора я сделал вывод, что проблема связана с z-index в сочетании с mix-blend-mode при наведении курсора. Есть ли решение или обходной путь, чтобы это работало в Firefox, как в Chrome? Вот 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 (неверно)