What is causing the bug in "mix-blend-mode mode" with .mp4 on Firefox?

Question

I am trying to use mix-blend-mode with a mp4 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 and live version on netlify. If you want to see it clearly.

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 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);
}

Answer 1

It is a bug 1708444 and it should be fixed in v. 89.