Z-index and mix-blend-mode are not working together on hover in Firefox

Question

EDIT: I think this is some kind of bug in Firefox (74.0) on Mac (Catalina). I have tested it on both my Mac and Macbook and they are behaving incorrectly, but it works fine on my PC Firefox.

I am currently developing a site that uses overlay gradients on top of images. The issue is when I am using them as hover elements for a clickable image. They work perfectly fine in Chrome, Safari, and Opera but they break in Firefox. I have deduced through the inspector that the issue is something wrong with z-index paired with mix-blend-mode on hover. Is there a solution or workaround for this to work in Firefox as it does in Chrome? Here is the URL to the site: http://c3.abettermancc.com/

Here is the isolated code for one of the "squares" that is being affected:

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>

This is what is looks like in Chrome (Correct)

And this is what is looks like in Firefox (Incorrect)

I suggest that you put up a code snippet containing only the relevant code which would make it easier for anyone who's trying to help you. Also i ran your code on both `Chrome 80.0.3987.132` and `FF 72.0.3` and it works fine — Rainbow, Mar 13 '20 at 16:08
Ok, I added in a code snippet with one of the "squares" isolated. — Justin Kendall, Mar 13 '20 at 16:20
Thats interesting that it worked for you. I am currently on a Mac. Could it possibly be a bug with the Mac version of Firefox? — Justin Kendall, Mar 13 '20 at 16:21
it's working fine on my Firefox, what version are you using? — Temani Afif, Mar 13 '20 at 19:21
@TemaniAfif I am using Version 74.0 (64 bit) on Mac. I also have tried it in private browsing just to make sure it wasn't a cookie or anything. — Justin Kendall, Mar 13 '20 at 21:10

Z-index and mix-blend-mode are not working together on hover in Firefox

0 Answers0