mix-blend-mode: multiply - Firefox 黑虫

Question

我正在根据 CSS 和 html 构建一个静脉图。由于某种原因，在 Firefox 中混合模式显示为全黑？

    .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 个黑色圆圈？

Answer 1

如评论中所述，OP 在 OSX

上使用 Firefox

根据 CanIuse.com "Known Issues" 这是一个错误

Bugzilla Reference

mix-blend-mode: multiply - Firefox 黑虫

mix-blend-mode: multiply - Firefox black bug

css

firefox

blend

background-blend-mode