Как исправить ошибку Safari Mix-Blend-Mode: Color-Dodge?

Question

Я хочу получить текст, который располагается поверх изображения и использующий mix-blend-mode: color-dodge, чтобы текст выглядел лучше.

Вот пример: https://codepen.io/pizza0502/pen/KepWGM

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

Answer 1

Заворачивайте свои вещи в контейнер, изолируйте контейнер и не располагайте абсолютно точно h1.

div {
  isolation: isolate;
}

h1 {
  font-size: 10rem;
  color: #fb4b6b;
  mix-blend-mode: color-dodge;
}

img {
  position: absolute;
  top: 200px;
  z-index: -1;
}

<div>
  <h1>Hello Mix Blend Mode</h1>
  <img src="https://source.unsplash.com/random"/>
</div>