Правильное отображение цвета mix-blend-mode

Ситуация следующая: есть плавающий блок с position: fixed (навигационное меню). К нему применяется mix-blend-mode: difference, этот блок при прокручивании наезжает на блок с background: black и все работает как нужно (черный текст на белом фоне и белый текст на черном фоне). Однако при наведении мыши (:hover эффект), цвет должен быть #dc145c, но из-за mix-blend-mode: difference он зеленый. isolation: isolate не помогает, есть ли другое решение? Примерное демо

$Black-color: #040404;
$Pin-color: #dc145c;
$White-color: #fff;


.logoContainer {
  top: 60px;
  position: fixed;
  margin-bottom: 29px;
}

.menu {
  top: 128px;
  position: fixed;
}

.navigate ul {
  background: inherit;
  margin-bottom: 40px;
}

.chapter {
  background: inherit;
  font-size: 24px;
  font-weight: 300;

  .chapterLink {
    color: $White-color;
    text-decoration: none;

    &:hover {
      color: $Pin-color;
    }
  }
}

.chapter:not(:last-child) {
  margin-bottom: 20px;
}