CSS mix-blend-mode breaks when translating parent element

Question

I'm encountering an issue with CSS mix-blend-mode, where the mix-blend-mode is lost when I apply a translation transformation to the parent element. I'm seeking a solution to maintain the mix blend mode effect during the translation.

The issue arises when I apply a transform, such as transform: translateX(20px);, to the parent div. Once this translation is applied, the text no longer blends with the background image as intended.

setTimeout(() => {
  const marquee = document.querySelector(".marque");
  marquee.classList.add("move");
}, 3000);

.main-content {
  position: relative;
  height: calc(100vh - 64px);

  padding-bottom: 10px;
}

.container {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.marque {
  position: relative;
  display: flex;
  transition: transform 10s linear;
  animation-iteration-count: infinite;
}

.marque.move {
  transform: translateX(-100%);
}

.title-link {
  display: grid;
  height: 100%;
  mix-blend-mode: difference;
  color: white;
  will-change: transform;
}

.title-link:hover {
  mix-blend-mode: initial;
  color: blue;
}

.title {
  font-size: 40px;
  cursor: pointer;
  text-align: center;

  /* Add styles for dynamic text sizing and hover color change */
}

.background-marque {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: -10;
}

.selected-pic {
  position: absolute;
  height: 100%;
  width: 100%;
}

.cover-image {
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<main class="main-content">
  <div class="container">
    <div class="marque">
      <a class="title-link">
        <h3 class="title" id="title1">Title One</h3>
      </a>
      <a class="title-link">
        <h3 class="title" id="title2">Title Two</h3>
      </a>
      <a class="title-link">
        <h3 class="title" id="title3">Title Three</h3>
      </a>
    </div>

    <div class="background-marque">

      <img class="cover-image" src="http://4.bp.blogspot.com/-XkviAtJ1s6Q/T3YFb2RUhDI/AAAAAAAAAVQ/EHomLZlFMKo/s1600/small+cat.jpg" alt="Cat Image">

    </div>
  </div>
</main>

Expected Behavior: The text should maintain its mix-blend-mode effect with the image during and after the translation. Actual Behavior: The mix-blend-mode effect is lost as soon as the translation is applied.

I have tried looking at the solution in this example, where you apply the blend mode to the parent, but then I lose the ability to hover each item to remove its blend move individually Mix-blend-mode doesn't work if I use "transform" on the parent div

Is there a way to maintain the mix-blend-mode 'difference' effect on text during a translation transformation of its parent div? Any insights or solutions would be greatly appreciated.