Hello everyone!
I cant seem to solve this issue or get help anywhere including Stackoverflow! So maybe Ill find some luck here. 
If ther is a better place to post please let me know.
I am trying to use mix-blend-mode in my css file with a mp4 playing in the background. The idea is to have div with some text and have the video play in the background for an effect on the letters. This works perfectly with every browser besides Firefox.
On Firefox the video plays in the background but mix-blend-mode doesn’t seem to have any effect. The text is just black. Here is the weird part: If I open the inspector the animations start to work but for one time only. I thought it might be a permission issue and allowed autoplay but that didn’t solve the problem. I haven’t been able to find what causes the bug. Any suggestions or hacks would be most welcome
Ive made the bit available on gitHub and live at netlify. Here is the repo on Github https://github.com/emelieedman/firefox-bug and the live version here : https://firefox-bug.netlify.app/ on netlify. If you want to see it clearly. (The code is made for React.js but I guess you get the idea)
the HTLM bit looks like this:
function App() {
return (
<div className="scroll-container">
<video className="background-video" autoPlay="autoplay" muted loop>
<source src={video} type="video/mp4" />
</video>
<div className="wrapper">
<div className="header">
THE CREATIVE
<br />
WEB AGENCY
<br />
DESIGN/CODE
</div>
</div>
</div>
);
}
and the here is the css:
.text {
overflow-y: scroll;
overflow-x: hidden;
background: rgb(255, 255, 255);
color: black;
z-index: 1;
mix-blend-mode: screen;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
mix-blend-mode: screen;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}