0

My h1 element loses its mix-blend-mode property, defaulting back to the color of white, when another element lower in the DOM has its own mix-blend-mode property added.

I'm having a really tough time pin pointing the source of this issue as different elements inside a div container seem to be breaking the mix-blend-mode property of the <h1> element (not in said container) when they themselves are given a mix-blend-mode property.

I can only produce this issue on Chrome when tested on Chrome and Firefox. I am only able to produce this issue on my website, not in codepen or anything similar for some reason.

Here is a draft of the website I'm working on (Open in Chrome!)

When you (continuously) hover over the sample video element (which plays the video, just give it a second to start), the h1 will lose its mix-blend-mode property, turning to white. Which is what I don't want. I do want the "video" text to gain the mix-blend-mode property when you hover the sample video, which it already does correctly, which I think is causing the issue somehow.

(There is a lot of extra css in the css file not attached to anything as I had to strip out many HTML elements.)

bitclip
  • 187
  • 7

1 Answers1

0

The problem was caused by the fact that I had an empty <div> as the first element inside my <body></body> acting as a background that had a z-index property of a negative number, or at least a non-zero value perhaps. Once I set the z-index of my background <div> to 0 or removed the z-index property entirely then the mix-blend-mode on the h1 problem stopped occurring for good.

HTML:

<body>
  <div id="bg"></div>
  ...
  ...
</body>

Problem CSS:


#bg {
  background-image: url("../img/someImage.jpg");
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -10;
}

I do not understand why this solved the problem as I figured out the solution by accident.

bitclip
  • 187
  • 7