Снижение переходов при комбинировании режима смешивания и непрозрачности на хром / электрон

Question

У меня есть следующий фрагмент кода, хорошо работающий на Chrome 68.0.3440.106, но не работающий на Electron 2.0.8 (Chromium 61.0.3163.100) и на Electron 3.0.0-beta.7 (Chromium 66.0.3359.181)

Требуемое поведение состоит в том, что div будет плавно переходить от непрозрачности 0 к 1 и обратно к 0. Это работает в Chrome, но в версиях Chromium, указанных выше, он остается заблокированным при непрозрачности 0 и затем привязывается к 1 после времени переходапрошел.Затухание отлично работает на обоих.Удаление mix-blend-mode из всех дочерних элементов решает проблему, но мне нужно это свойство.

Есть идеи, как исправить?

function toggleOpacity(){

$("#container").toggleClass("hidden");

}

.visible{
opacity:1;
}

#outer{
 background: rgba(0, 0, 0, 0.2);
}

#container{
width:100px;
height:100px;
    background: rgba(0, 0, 0, 0.6);
transition: all 2.3s;
mix-blend-mode:difference;


}

.hidden{
opacity:0;

}

h2,h3,h1{
color:white;
mix-blend-mode:difference;
transition: all 2.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="outer">
<div id="container">
  <h2> Test</h2>
  
  <h3> Test 2</h3>
  
  <h1> Test 3 </h1>

</div>
</div>

<button onclick="toggleOpacity()">Click Me</button>