0

So I have a custom cursor that uses mix-blend-mode: exclusion in my website.

The cursor's original colour (without considering mix-blend-mode) is cyan and most elements below it are either white, black, blue or magenta, so the colours you can see there are these:

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>

However, that doesn't look the same in Chrome than it does in 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

I'd like to know if there's a way to make both looks the same.

I have been playing around with other values for mix-blend-mode (exclusion, in particular) and filter, but I can't get anything to look consistent in both and maintain a similar behaviour.

Funny enough, if you change the colour of the cusror (.circle in the example), it works fine for most other values...

Danziger
  • 19,628
  • 4
  • 53
  • 83
  • 1
    I show same in both browser – Nisharg Shah Apr 18 '20 at 01:16
  • @NishargShah Which versions are you using? – Danziger Apr 18 '20 at 01:26
  • 1
    Latest versions of both , same version you specified in your post – Nisharg Shah Apr 18 '20 at 01:29
  • 1
    I am using also the same Chrome version that you say, and it renders the same than in Firefox .... (that, by the way, is the correct one) – vals Apr 21 '20 at 14:14
  • Ok, thank you both, then it probably has to do with some weird GPU or drivers issue on this computer, as I haven't been able to reproduce it anywhere and it also looks like that on the new Edge, so definitely not related to `about:flags` either. Will find out soon once I replace some components on this build – Danziger Apr 21 '20 at 15:21

0 Answers0