Почему mix-blend-mode влияет на элементы в соседнем блоке?

Есть блок с картинками которые перекрашиваются с помощью mix-blend-mode, ниже есть блок в котором есть элементы вращающиеся при :hover.

Так вот, при hover на эти элементы у блока с mix-blend-mode начинаются гличи как на картинке

Без ховера всё хорошо и блоки с mix-blend-mode выглядят так

в firefox всё работает нормально

Код блока с mix-blend-mode

<div id="how-we-work">    
    <div>
        <p><img src="ссылка">текст</p>
    </div>
</div>

#how-we-work>div>*:before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    background: var(--green);
    mix-blend-mode: color;
    z-index: 2;
}

Код блока с hover

<div>
    <img class="rotater" src="ссылка">
</div>

#before-footer .rotater:hover {
    transform: rotate(20deg);
}    
#before-footer .rotater {
    transition: .3s transform;
}