Mix-blend-mode: Multiply Bug in Firefox
I am trying to implement mix-blend-mode in Firefox, which seems to be supported, but I only get black elements when using "multiply". does anyone know why this happened? How to fix it?
Here's a link to the problem recreated in the Codepen: http://codepen.io/anater/pen/xGWddq
.circle-red,
.circle-blue{
position: absolute;
width: 100px;
height: 100px;
border-radius: 100%;
mix-blend-mode: multiply;
}
.circle-red{
background: red;
top: 50%;
left: 50%;
transform: translate(-75%, -50%);
}
.circle-blue{
background: blue;
top: 50%;
left: 50%;
transform: translate(-25%, -50%);
}
This does not happen in Chrome or Safari, it is isolated from Firefox.
source to share
But the correct result when multiplying red and blue the black
To test this, it is better to set different colors, for example, blue and yellow.
.circle-red,
.circle-blue{
position: absolute;
width: 100px;
height: 100px;
border-radius: 100%;
mix-blend-mode: multiply;
}
.circle-red{
background: rgb(255, 255, 0);
top: 50%;
left: 50%;
transform: translate(-75%, -50%);
}
.circle-blue{
background: rgb(0, 255, 255);
top: 50%;
left: 50%;
transform: translate(-25%, -50%);
}
<div class="circle-red"></div>
<div class="circle-blue"></div>
I can't test it anymore, but the previous version of Firefox had a problem with the mix-blend-mode and the base element (in this case, the body) missing background color.
Can you try to install
body {
background-color: white;
}
source to share
It seems to be related to a bug in FF for Mac:
https://bugzilla.mozilla.org/show_bug.cgi?id=1135271
The solution that worked for me (with rectangular DIVs) was applying a transparent outline for the div!
Cm:
https://medium.com/@maykelesser/how-to-fix-osx-firefox-mix-blend-mode-bug-6b3548e9e546
And the answer from Paule_D on
source to share