mix-blend-mode: multiply - Firefox 黑色 bug

Posted 2023-02-22

【中文标题】mix-blend-mode: multiply - Firefox 黑色 bug

【英文标题】：mix-blend-mode: multiply - Firefox black bug

【发布时间】：2015-09-15 12:46:41

【问题描述】：

我正在用 CSS 和 html 构建一个 ven 图。在 Firefox 中，由于某种原因，mix-blend-mode 显示为全黑？

    .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 中显示为 2 个黑色圆圈？

【问题讨论】：

这是 OSX 上的 FF 吗？有一个bug

是的 - OSX。那是有道理的-尝试了各种方法来解决它，但没有运气。感谢@Paulie_D 的链接

添加透明轮廓对 DIV 有帮助吗？

【参考方案1】：

正如 cmets 中所讨论的，OP 在 OSX 上使用 Firefox

根据“已知问题”下的CanIuse.com，这是一个错误

Bugzilla Reference