是什么导致 Firefox 上带有 .mp4 的“混合混合模式”中的错误？

Question

我正在尝试在后台使用带有 mp4 的混合混合模式。 这个想法是让 div 带有一些文本，并在背景中播放视频以对字母产生影响。 这适用于除 Firefox 之外的所有浏览器。

在 Firefox 上，视频在后台播放，但 mix-blend-mode 似乎没有任何效果。 文字只是黑色。 这是奇怪的部分：如果我打开检查器，动画开始工作，但只有一次。 我认为这可能是权限问题并允许自动播放，但这并没有解决问题。 我一直无法找到导致该错误的原因。 任何建议或黑客将是最受欢迎的:)

我已经在 gitHub 上提供了该位，并住在 netlify。 这是 github 上的 repo 和netlify上的实时版本。 如果你想看清楚。

HTLM 位如下所示：

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

这是 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

这是一个错误 1708444 ，应该在 v. 89 中修复。