On a website I'm developing, I'm using mix-blend-mode:difference to give an interesting effect when some elements are positioned over other elements. I noticed recently that in webkit browsers, on my Macbook Pro display, the color of the div with mix-blend-mode:difference on it is much darker than it should be, in some specific scenarios.
See my codepen: https://codepen.io/matt_o_tron_5000/pen/LYxPaLm
HTML:
<div class="background">
<div class="plain-color"></div>
<div class="blend-color"></div>
</div>
CSS:
.background {
background-color: #fff;
}
.plain-color,
.blend-color {
width: 200px;
height: 200px;
}
.plain-color {
background-color: #04f;
}
.blend-color {
background-color: #fb0;
mix-blend-mode: difference;
}
In the codepen, one div is using a normal hex color code as the background color, and the other div is using the exact opposite hex code as the background color, with mix-blend-mode:difference applied.
On my external monitor, these two divs are the exact same color (and yes this monitor is reliably color-accurate). But if I move the window to my Macbook Pro display, suddenly the mix-blend-mode div is much darker than the other.
Additionally, when testing in Firefox, the color of the 2 divs match exactly no matter which display I view them on. Only in Safari and Chrome does the div look unexpectedly dark on my Macbook monitor.
I assume this has something to do with the fact that Safari and Chrome use webkit while Firefox uses a different engine (gecko), but... Why the difference between monitors? I am confusion.
Photo examples:
2 divs in Chrome on external display:
2 divs in Chrome on Macbook display:
