Mix-blend-mode: Multiply Bug в Firefox

Question

Я пытаюсь реализовать mix-blend-mode в Firefox, который, кажется, поддерживается, но я получаю только черные элементы при использовании «multiply». кто-нибудь знает, почему это произошло? Как это исправить?

Вот ссылка на вопрос, воссозданный в 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%); 
} 

Это не происходит в Chrome или Safari, он изолирован на Firefox.

Answer 1

Но правильный результат при умножении красный и синий является черный

Чтобы проверить это, лучше устанавливать различные цвета, голубой и желтый, например

.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>

я могу больше не тестировали его, но в предыдущей версии Firefox возникла проблема с использованием режима mix-blend-mode и базового элемента (в данном случае, тела) фоновый цвет.

Вы можете попытаться установить

body { 
    background-color: white; 
} 

Answer 2

У меня была аналогичная проблема, и это решил для меня: Установите цвет (умножается) с помощью RGBA с «а» значение 0,99 вместо равнину RGB.

Answer 3

Это, кажется, из-за ошибки в FF для Mac:

https://bugzilla.mozilla.org/show_bug.cgi?id=1135271

Решение, которое работало для меня (с прямоугольными DIVs) было нанесение прозрачного контура к DIV!

См:

https://medium.com/@maykelesser/how-to-fix-osx-firefox-mix-blend-mode-bug-6b3548e9e546

И ответ от Paule_D на

Answer 4

Try отключить аппаратное ускорение в Firefox (Option> Дополнительно> Использовать аппаратное ускорение при наличии OFF)