Режим смешивания смешивается с помощью 3D-преобразований на странице.

Question

Я возился с mix-blend-mode имущество. Все отлично работает, пока не добавлю что-то вроде transform: perspective(100px) или любое другое 3d преобразование в любом месте на странице, затем оно полностью ломается. Преобразование применяется, но режим смешивания исчез.

Я тестировал на Chrome и Firefox, а также на Linux и Windows, и везде одинаково, однако на другом компьютере все работало нормально (я не помню, какая версия Chrome использовалась и работала с Ubuntu).

Это что-то, что можно исправить с помощью CSS, или это просто проблема с драйверами оборудования / графического процессора?

я кладу background-blend-mode в тегах, потому что mix-blend-mode тег еще не существует, однако это свойство странным образом работает совершенно нормально и не нарушается преобразованиями.

Вот кодекс того, чего я пытаюсь достичь: http://codepen.io/vnenkpet/pen/avWvRg

Молния не должна иметь черный фон, мигающий с ней, но должна плавно смешиваться с фоном страницы.

РЕДАКТИРОВАТЬ:

Я только что узнал, что это действительно работает в Firefox. Это, следовательно, ошибка Chrome? Насколько я знаю, 3D-трансформации не должны нарушать режим наложения...

Answer 1

У меня была похожая проблема, за исключением того, что применение mix-blend-mode (умножить) выше на странице сломал мой transformниже на странице (используя Chrome на Mac). Я смог это исправить, применив z-index править mix-blend-mode div (не забудьте установить position, тоже).

Однако я не совсем уверен, является ли это ошибкой или ожидаемым поведением из-за свойств контекста стека.

Answer 2

Я понимаю, что это довольно старый поток, но у меня была та же проблема с janky-преобразованиями в Webkit/Blink с использованием плагина Masonry Isotope с оверлеем mix-blend-mode на участках сетки, пока я не добавил следующий CSS-код к элементу, который был преобразован. то есть элемент сетки кладки

Я отвечаю на это, если это поможет кому-то в будущем.

[your-selector-goes-here] {
    perspective:1000px;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

Answer 3

Вы также можете попробовать применить нулевое преобразование ( продвижение 3D-слоя) к элементу, который имеет mix-blend-mode Оговаривается:

.content {
    mix-blend-mode: difference;
    transform: translate3d(0, 0, 0);
}

Таким образом, Chrome может успешно смешивать два 3D-слоя вместе, вместо того чтобы смешивать 3D-слой и 2D-слой.

Вот фрагмент, демонстрирующий проблему и решение:

function change(event) {
  var content = document.querySelector(".content")
  content.className = event.target.checked ? "content content-with-transform" : "content"
}

.parent {
  text-align: center;
  padding: 2rem;
  font-size: 5rem;
  font-weight: 700;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4rem;
  background-color: #AB1795;
  transform: translate3d(0, 0, 0);
  z-index: -1;
}

.content {
  mix-blend-mode: difference;
  background-color: #167CFB;
}

.content-with-transform {
  transform: translate3d(0, 0, 0);
}

<div class="parent">
  <div class="fixed"></div>
  <div class="content">Content</div>
</div>
<label><input type="checkbox" onchange="change(event)"/> Also transform other element</label>

(Я наткнулся на эту проблему при использовании will-change: transform не фактическое преобразование, но решение то же самое.)