@tyoma_koder

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

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

Так вот, при hover на эти элементы у блока с mix-blend-mode начинаются гличи как на картинке
P32ZI.jpg
без ховера всё хорошо и блоки с mix-blend-mode выглядят так
y1way.jpg
в 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;
}
  • Вопрос задан
  • 16 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы