Mix-blend-mode: multiply - Firefox black error
I am creating a ven diagram from CSS and html. In firefox, for some reason the mix-blend mode appears completely black?
.ven-element {
width: 63%;
padding-top: 63%;
border-radius: 50%;
text-transform: uppercase;
font-weight: bold;
mix-blend-mode: multiply;
color: white;
-webkit-box-shadow: inset 0px 0px 20px 1px rgba(0,0,0,0.22);
-moz-box-shadow: inset 0px 0px 20px 1px rgba(0,0,0,0.22);
box-shadow: inset 0px 0px 20px 1px rgba(0,0,0,0.22);
position: absolute;
}
.ven-left {
background: #82bf55;
z-index: 3;
left: 0;
text-align: left;
padding-left: 13px;
}
.ven-right {
background-color: #2f9ad3;
z-index: 4;
right: 0;
text-align: right;
padding-right: 20px;
}
<div class="ven-wrapper">
<div class="ven-element ven-left">
<span>Left</span>
</div>
<div class="ven-element ven-right">
<span>Right</span>
</div>
</div>
For some reason this shows up as 2 black circles in FireFox?
0
source to share
1 answer
As discussed in the comments, the OP is using Firefox on OSX
In CanIuse.com , under Known Issues, this is a bug
+2
source to share