在 Firefox 上使用 .mp4 导致 "mix-blend-mode mode" 中的错误的原因是什么？

Question

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

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

我在 gitHub 上提供了该位并在 netlify 上直播。这是 netlify 上 github and live version 上的回购协议。如果你想看清楚的话。

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

这是一个 bug 1708444，应该在第 89 节中修复。

在 Firefox 上使用 .mp4 导致 "mix-blend-mode mode" 中的错误的原因是什么？

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

javascript

css

reactjs

firefox

mix-blend-mode