mix-blend-mode：multiply - Firefox的黑bug [英] mix-blend-mode: multiply - Firefox black bug

问题描述

我正在用CSS和HTML建立一个ven图。在firefox中由于某种原因混合混合模式显示完全黑色？

I am building a ven diagram out of CSS and html. In firefox for some reason the mix-blend-mode is showing up 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>

由于某种原因，黑色圆圈在FireFox？

For some reason this shows up as 2 black circles in FireFox?

推荐答案

在OSX上使用Firefox

As discussed in the comments, the OP is using Firefox on OSX

每 CanIuse .com 这是一个错误

Per CanIuse.com under "Known Issues" this is a bug

Bugzilla参考

这篇关于mix-blend-mode：multiply - Firefox的黑bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！