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

【问题标题】：What is causing the bug in "mix-blend-mode mode" with .mp4 on Firefox?是什么导致了 Firefox 上带有 .mp4 的“混合混合模式”中的错误？
【发布时间】：2021-07-25 18:04:26
【问题描述】：

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

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

我已经在 gitHub 上提供了这个位并且住在 netlify。这是 netlify 上 github 和 live version 的 repo。如果你想看清楚的话。

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

【问题讨论】：

你能给我们做一个 sn-p，这样我们就可以试试这个 - 特别是关于它（部分）与检查员合作的一点。 [链接]stackoverflow.com/help/minimal-reproducible-example
我已经在 gitHub 上提供了这个位，并住在 netlify。这是 github 上的 repo：github.com/emelieedman/firefox-bug 并住在 firefox-bug.netlify.app
我很困惑，因为在 FF 上尝试了所有权限重新自动播放等，但只看到黑色。不过有几个想法-您是否尝试过较小的（按字节）视频，因为 FF 可能正在尝试加载块？并且自动调整大小（宽度方向）是否适用于 FF，因为它看起来好像视频烟雾位在右侧。您是否尝试过只显示视频而运行 - 它确实可以播放吗？很抱歉没有提供更多帮助。
是的，如果你删除了视频播放正常的文字，那就是有趣的部分......我会尝试你的其他建议，看看它们是否有帮助:)谢谢
这也打击了我们。一位用户报告了该问题，但直到我将 Firefox 升级到 v88 后我才能看到该问题。

标签： javascript css reactjs firefox mix-blend-mode

【解决方案1】：

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

【讨论】：

刚刚升级了我的 Firefox。该错误已修复：D。哈利路亚