Режим смешивания: в Chrome разница выглядит иначе, чем в Firefox - PullRequest
Новая
       91

Режим смешивания: в Chrome разница выглядит иначе, чем в Firefox

0 голосов
/ 18 апреля 2020

Итак, у меня есть собственный курсор, который использует mix-blend-mode: exclusion на моем веб-сайте .

Исходный цвет курсора (без учета mix-blend-mode) равен cyan и большинство элементов под ним: white, black, blue или magenta, поэтому вы можете видеть следующие цвета: 

body {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  overflow: hidden;
}

.box {
  width: 50vw;
  height: 50vh;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 25vh;
  width: 50vh;
  height: 50vh;
  mix-blend-mode: difference;
  background: #0FF;
}
<div class="box" style="background: #FFF;"></div>
<div class="box" style="background: #00F;"></div>
<div class="box" style="background: #000;"></div>
<div class="box" style="background: #F0F;"></div>
<div class="circle"></div>

Однако в Chrome это выглядит не так, как в Firefox.

Chrome (Version 81.0.4044.113 (Official Build) (64-bit)):

enter image description here

Firefox (Version 75.0 (64-bit)):

enter image description here

Я хотел бы знать, есть ли способ сделать оба вида одинаковыми.

Я играл с другими значениями для mix-blend-mode (exclusion, в частности) и filter, но я не могу заставить что-либо выглядеть одинаково в обоих случаях и поддерживать одинаковое поведение.

Достаточно забавно, если вы измените цвет cusror (.circle в примере), он отлично работает для большинства других значений ...

...