Question

所以我在尝试使用css filter，但实验效果很好，但在Firefox中没有。

我想在背景图片的一段上应用滤镜。我的想法是修复包装器和内部元素的背景图像，以创建过滤器仅应用于某个区域并可以移动的错觉，这里有滚动。

这就是我的尝试：

＆＃13;

html,
body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0px;
    height: 200%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column
}

body,
div {
    background-image: url("https://i.imgur.com/wu7EkAX.jpg");
    background-attachment: fixed;
}

div {
    filter: saturate(0%);
    width: 50%;
    height: 40%;
}

＆＃13;

<div></div>
<div></div>

＆＃13;

这适用于Chrome（我认为也适用于其他浏览器），但不适用于Firefox。似乎这是一些行为不当的结果。

如果使用鼠标滚动然后单击，则会刷新，否则它将保持此状态（至少如果您单独运行它）。

Answer 1

＆＃34;解决方案＆＃34;很简单，你强制Firefox重新渲染，有关于这个主题的完整帖子，但这里有两个我的方法：

使用css动画

@keyframes renderFix {
    from {
        outline-color: red;
    }

    to {
        outline-color: blue;
    }
}

html {
    outline: 1px solid red;
    animation: 1s infinite alternate renderFix;
}

使用一些JavaScript

{
    let html, s = false,
        cycle = function () {
            html.style.outlineColor = s ? "red" : "blue"
            s = !s;
            window.requestAnimationFrame(cycle)
        }

    window.requestAnimationFrame(function () {
        html = document.body.parentElement
        html.style.outlineStyle = "solid";
        html.style.outlineWidth = "1px";
        cycle()
    })
}

应用了JavaScript修补程序：

＆＃13;

{
    let html, s = false,
        cycle = function () {
            html.style.outlineColor = s ? "red" : "blue"
            s = !s;
            window.requestAnimationFrame(cycle)
        }

    window.requestAnimationFrame(function () {
        html = document.body.parentElement
        html.style.outlineStyle = "solid";
        html.style.outlineWidth = "1px";
        cycle()
    })
}

＆＃13;

html,
body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0px;
    height: 200%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column
}

body,
div {
    background-image: url("https://i.imgur.com/wu7EkAX.jpg");
    background-attachment: fixed;
}

div {
    filter: saturate(0%);
    width: 50%;
    height: 40%;
}

＆＃13;

<div></div>
<div></div>

＆＃13;

Firefox使用固定背景图像和应用过滤器渲染错误

1 个答案: