Why does applying a CSS-Filter on the parent break the child positioning?(为什么在父对象上应用css过滤器会破坏子对象的定位？)-6ren

Why does applying a CSS-Filter on the parent break the child positioning?(为什么在父对象上应用css过滤器会破坏子对象的定位？)

转载作者：bug小助手更新时间：2023-10-25 19:33:30

So I have this title-screen "animation" that has the title centered on a fullscreen page and when you scroll down it becomes smaller and remains at the top of the page. Here is a working example with the expected behavior, from which I stripped all unnecessary code to make it minimal:

所以我有这个标题屏幕的“动画”，它的标题在一个全屏页面上居中，当你向下滚动时，它会变小，并保持在页面的顶部。以下是一个具有预期行为的工作示例，我从中剔除了所有不必要的代码以使其最小化：

$(window).scroll( () => {
    "use strict";
    let windowH = $(window).height();
    let windowS = $(window).scrollTop();
    let header  = $("#header").height(); 
    
    if (windowS < windowH-header) {
        $("#title").css("transform", "scale("+(2-(windowS/($(document).outerHeight()-windowH))*2.7)+")");
        $("#header").css("transform", "translateY(0)");
        $("#inside, #content").css({
            "position": "static",
            "margin-top": 0
        });
    } else {
        $("#inside").css({
            "position": "fixed",
            "margin-top": -windowH+header
        });
        $("#content").css("margin-top", windowH);
    }
  
    $("#header").css("position", windowS > (windowH-header)/2 ? "fixed" :"static");
});

.fixed {
    position: fixed!important;
}
.wrapper {
    width: 100%;
    text-align: center;
}
.wrapper:before {
    display: table;
    content: " ";
}
.wrapper:after {
    clear: both;
}
#inside {
    width: 100%;
    height: 100vh;
    background-color: lightcoral;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header {
    height: 90px;
    top: 0;
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}
#title {
    width: 100%;
    color: #fff;
    transform: scale(2);
}
#content {
    height: 1000px;
    background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>  
    <div class="wrapper">
        <div id="inside">
            <div id="header">
                <h1 id="title">Title</h1>
            </div>
        </div>
    <div id="content"></div>
</body>

Next up is the exact same snippet but with one addition: I applied a filter, which is, as far as I'm concerned, purely cosmetic: filter: brightness(1.3);.

接下来是完全相同的片段，但有一个添加：我应用了一个过滤器，就我而言，这纯粹是装饰性的：filter：brightness（1.3）;。

As you can see below when you scroll half-way through the "animation" the title just disappears. When you inspect the element it still has all its properties but somehow it's gone. This is the same in Firefox and Chrome and I have no idea why. I would appreciate it a lot if someone could post a working snippet with the filter applied and explain why it didn't work before.

正如你在下面看到的，当你滚动到动画的一半时，标题就消失了。当你检查元素时，它仍然有它的所有属性，但不知何故它消失了。火狐和Chrome的情况也是一样，我不知道为什么。如果有人能发布一个应用了滤镜的工作片段，并解释为什么以前不起作用，我会非常感激的。

$(window).scroll( () => {
    "use strict";
    let windowH = $(window).height();
    let windowS = $(window).scrollTop();
    let header  = $("#header").height(); 
    
    if (windowS < windowH-header) {
        $("#title").css("transform", "scale("+(2-(windowS/($(document).outerHeight()-windowH))*2.7)+")");
        $("#header").css("transform", "translateY(0)");
        $("#inside, #content").css({
            "position": "static",
            "margin-top": 0
        });
    } else {
        $("#inside").css({
            "position": "fixed",
            "margin-top": -windowH+header
        });
        $("#content").css("margin-top", windowH);
    }
  
    $("#header").css("position", windowS > (windowH-header)/2 ? "fixed" :"static");
});

.fixed {
    position: fixed!important;
}
.wrapper {
    width: 100%;
    text-align: center;
}
.wrapper:before {
    display: table;
    content: " ";
}
.wrapper:after {
    clear: both;
}
#inside {
    width: 100%;
    height: 100vh;
    background-color: lightcoral;
    filter: brightness(1.3);        /*<<<<<<<<<<<<<<<<*/
    display: flex;
    align-items: center;
    justify-content: center;
}
#header {
    height: 90px;
    top: 0;
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}
#title {
    width: 100%;
    color: #fff;
    transform: scale(2);
}
#content {
    height: 1000px;
    background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>  
    <div class="wrapper">
        <div id="inside">
            <div id="header">
                <h1 id="title">Title</h1>
            </div>
        </div>
    <div id="content"></div>
</body>

更多回答

优秀答案推荐

If we refer to the specification we can read:

如果我们参考规范，我们可以阅读：

A value other than none for the filter property results in the
creation of a containing block for absolute and fixed positioned
descendants unless the element it applies to is a document root
element in the current browsing context. The list of functions are
applied in the order provided.

This means that your position:fixed element will be positioned relatively to the filtered container and no more the viewport. In other words, it's still fixed but inside its new containing block (the filtered container)

这意味着您的位置：固定元素将相对于过滤的容器定位，而不再是视区。换句话说，它仍然是固定的，但在其新的包含块(已过滤的容器)中

Here is a simplified version to illustrate the issue:

以下是一个简化版本来说明这个问题：

.container {
  display: inline-block;
  width: 200px;
  height: 200vh;
  border: 1px solid;
}

.container>div {
  position: fixed;
  width: 100px;
  height: 100px;
  background: red;
  color: #fff;
}

<div class="container">
  <div>I am fixed on scroll</div>
</div>

<div class="container" style="filter:grayscale(1);">
  <div>I move with the scroll</div>
</div>

To fix the issue try to move the filter to the fixed element instead of its container:

要解决此问题，请尝试将筛选器移动到固定元素，而不是其容器：

.container {
  display: inline-block;
  width: 200px;
  height: 200vh;
  border: 1px solid;
}

.container>div {
  position: fixed;
  width: 100px;
  height: 100px;
  background: red;
  color: #fff;
  filter: grayscale(1);
}

<div class="container">
  <div>I am fixed on scroll</div>
</div>

Here is a non-exhaustive¹ list of the properties that results in the creation of a containing block for absolute and fixed positioned descendants

以下是导致为绝对和固定定位的子体创建包含块的属性的非详尽列表1

filter

transform ^ref

backdrop-filter ^ref

perspective ^ref

contain ^ref

container ^ref

transform-style ^ref

content-visibility ^ref

will-change when used with one of the above values

If any non-initial value of a property would cause the element to generate a containing block for absolutely positioned elements, specifying that property in will-change must cause the element to generate a containing block for absolutely positioned elements. ^ref

¹: I will try to keep this list up to date.

他说：我会努力使这份清单保持最新。

You can make it happen by using before. instead of assigning the filter: brightness(1.3); to the child element directly. assign color and filter to the before of this child element. so your code should be like this:

您可以通过使用之前来实现它。而不是直接将滤镜：Brightness(1.3)；分配给子元素。将颜色和滤镜分配给此子元素的前面。因此，您的代码应该如下所示：

  #inside:before{
    filter: brightness(1.3);
    content: "";
    background-color: lightcoral;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

This will fix the problem.

这将解决这个问题。

You should also edit some of your code to make this fully work:

您还应该编辑一些代码以使其完全正常工作：

#inside{
    position: relative;
}

Make the parent position to be relative to make sure the before wrap inside its parent.

将父位置设置为相对位置，以确保前折回位于其父位置内。

This solution also works with other filters like backdrop-filter.

此解决方案也适用于其他滤镜，如背景滤镜。

If you want to blur or grayscale the entire page except one element, just use backdrop-filter instead of filter.
At the time of writing Firefox just needs to ship it by default.

如果你想模糊或灰度化整个页面，除了一个元素，只需使用backdrop-filter而不是filter。在写这篇文章的时候，Firefox只需要在默认情况下提供它。

Not working:

不起作用：

<!DOCTYPE html><html><head>
    <style>
    .overlay {
        position:fixed;
        right:10%;
        top:10%;
        bottom:10%;
        left:10%;
        background-color:red;
        z-index:2;
    }
    .overlay ~ * {
        filter: grayscale(50%) blur(5px);
    }
    </style>
</head>
<body>
    <div class="overlay">I am not blurred</div>

    <!-- position test -->
    <div style="margin-top:100px;float:right;">
        <div style="background-color:red;position:fixed;top:0;right:0;width:100px;height:100px;"></div>
    </div>
</body>
</html>

Working:

工作：

<!DOCTYPE html><html><head>
    <style>
    .overlay {
        position:fixed;
        right:10%;
        top:10%;
        bottom:10%;
        left:10%;
        background-color:red;
        z-index:2;
    }
    body:after {
        content:"";
        position:fixed;
        z-index: 1;
        top:0;
        left:0;
        width:100%;
        height:100%;
        backdrop-filter: grayscale(50%) blur(5px);
    }
    </style>
</head>
<body>
    <div class="overlay">I am not blurred</div>

    <!-- position test -->
    <div style="margin-top:100px;float:right;">
        <div style="background-color:red;position:fixed;top:0;right:0;width:100px;height:100px;"></div>
    </div>
</body>
</html>

In order to avoid hard maintenance and different implementation for each browser, you can use a recursive tree traversal function which marks the position 'fixed' nodes and then apply the needed filter properly without destroying the positions.

为了避免繁琐的维护和每个浏览器不同的实现，可以使用递归树遍历函数，将位置标记为固定的节点，然后在不破坏位置的情况下正确应用所需的过滤器。

I used this code in order to apply the 'filter invert' property globally, without hard-coding it to specific parent elements.

我使用此代码是为了全局应用‘Filter Invert’属性，而不是将其硬编码到特定的父元素。

更多回答

Thank you! I still wonder why this is a thing. Wouldn't it be better if this wasn't the case?

谢谢!我仍然想知道为什么这是一件事。如果不是这样的话不是更好吗？

@MiXT4PE it's defined in the spec so it should be like that, you may probably ask why they define it this way .. I am pretty sure there is a reason (probably a complex one) behind this choice.

@MiXT4PE它是在规范中定义的，所以应该是这样的，你可能会问为什么他们这样定义它。我非常肯定，这一选择背后有一个原因(可能是一个复杂的原因)。

@ygoe first it's not bug, it's by design like many features that we don't like but we should work with (clear float, margin collapsing, etc) so you should adapt your code in order to overcome this. There is no universal solution but depending on your case there is for sure a solution. You may ask a question by adding your particular code in order to see if we can modify your logic to keep your requirement and fix the issue.

@ygoe首先它不是错误，它的设计就像我们不喜欢的许多功能一样，但我们应该使用(清除浮动、边距折叠等)，所以你应该调整你的代码来克服这个问题。没有万能的解决方案，但根据你的情况，肯定有解决方案。您可以通过添加您的特定代码来提出问题，以查看我们是否可以修改您的逻辑以保留您的需求并解决问题。

Further context for your answer: this GitHub issue added the specification that a containing block is created when filter has a value other than none. The GitHub issue also has a link to the discussion where this was decided, and this code example (archive link) was used to illustrate the ambiguity the containing block was designed to fix.

您的答案的进一步上下文：这个GitHub问题增加了当Filter的值不是None时创建包含块的规范。GitHub的问题也有一个链接，链接到决定这个问题的讨论，这个代码示例(存档链接)用于说明包含块旨在解决的歧义。

Spec Issue 402. Firefox bug 1650522.

规范问题402。Firefox错误1650522。

Just a little update regarding Firefox: it appears it still has not been rolled-out, but may be rolled-out soon. For updates, see bugzilla.mozilla.org/show_bug.cgi?id=1578503

关于Firefox的一个小更新：它似乎还没有推出，但可能很快就会推出。有关更新，请参阅bugzilla.mozilla.org/show_bug.cgi？id=1578503

As @Temani Afif backdrop-filter has the same effect as filter

As@Temani Afif Backdown-Filter与Filter具有相同的效果

javascript - 如果 doc 有 child ，请删除所有 child ，如果 child 有更多 child ，请删除这些 child
我的收藏具有以下结构 { _id:1, parent_id:0 } { _id:2, parent_id:1 } { _id:3, parent_id:1 } { _id:4, par
c# - 在Unity3d中获取所有 child ， child 的 child
到目前为止，我已经尝试过获取该对象的所有子对象，但它只带来了两个子对象。不都是 child 的 child 。我如何获取所有内容并循环获取特定名称对象 Transform[] objChild = g
jquery获取 child 的 child 的 child
这个问题不太可能对任何 future 的访客有帮助；它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用，visit the
mysql - 需要在轨道上排列自己、 child 和 child 的 child
我有一个如下表好吧，在这个表中每个用户都有一个父用户，那么如果我们选择一个用户，那么它的 id 、子代 id 和子代子代 id 应该作为数组返回。我需要一个查询来获取 Rails 中的这些值，而不使
javascript - Jquery child>Parent>child>child 选择器
我需要以下代码的帮助: HTML: process process 在点击 td[class=process] 时，我需要 input[name=dat
php - 第一个 child 最后一个 child 和中间的 child
好的，所以我从中获得了一个 PHP，该 PHP 由依赖于手头动态情况的切换循环传播(我认为)。现在，当我添加一个复选框时，我希望能够使 div 中的第一个复选框具有顶部边框和侧面，没有底部。下面的只有
swift - Swift 中的 Sprite Kit Child of Child of Child
我正在使用 Swift 和 Sprite Kit。我有一个名为 MrNode 的 SKNode，它有多个 SKSpriteNodes 和 SKNode 子节点。一些SKNode有子节点，而这些子节点也
sql - 获取 child 关系的计数和 child 的 child 的计数
对不起，这个标题太俗了，但我真的不确定如何解释这个，我是新一代的 SQL 技能由于事件记录模式而退化的人之一! 基本上我在 PostgreSQL 中有三个表客户端(一个客户端有很多 map ) -
php - 找到没有 child 的行，如果有 child 最新的 child
我有这样的简单表格: 编号 parent_id 创建于具有父/子关系...如果一行是子行，则它有一个 parent_id，否则它的 parent_id 为 0。现在我想选择所有没有子项(因此本身)
javascript - 删除具有所述 child ID 的 child 的 child
所以我有这样的结构: 我的问题是:如何从每个主题中删除 ID 为 3Q41X2tKUMUmiDjXL1BJon70l8n2 的每个字段。我正在考虑这样的事情: admin.database().ref
html - CSS - 模糊所有的 child ，除了悬停的 child ，当鼠标悬停在 child 身上时
这个问题在这里已经有了答案: Change opacity on all elements except hovered one (1 个回答) 关闭 5 个月前。因此，当鼠标悬停在 child
德尔福快速报告 : Band order to achieve detail-child-child-child banding?
我需要在 Delphi 5 中创建一个 QuickReport，其布局如下: +================ | Report Header +================ +========
html - 如何在不提及第一个 child 的情况下在 css 中定义 child 的 child ？
假设我有这样的 html: Some more detailed code.... 我想知道如何在CSS中使用“A
html - 我怎样才能包装 flexbox child ，以便多个 child 堆叠在另一个 child 旁边？
我有一个使用 flexbox 的类似表格的布局: +--------------+---------------+-----------------+---------------+ | 1
ruby-on-rails - Rails - 同时创建 child 和 child 的 child
我有一个关联，其中 user has_many user_items 和 user_items has_many user_item_images。与一个已经退出的用户。我可以创建一个新的 user_
html - 第 n 个 child ()还是第一个 child ？如何选择第一个和第二个 child
我想选择无序列表中的前两个列表项。我可以这样选择第一项: ul li:nth-child(1) a { background: none repeat scroll 0 0 beige; }
css - 当只有一个 child 可用时，最后一个 child 样式会覆盖第一个 child 样式
ul li:first-child a { border-radius: 5px 5px 0 0; } ul li:last-child a { border-radius: 0 0 5p
html - 如何选择没有 firstChild 或 nth-child() 的 child 的 child ？
我有一个这样的表:
c++ - "child control"、 "child window"和 "child window control"之间有区别吗？
或者这些术语用于指代同一事物？我正在尝试在我的 Win32 应用程序中实现一些显示位图图像的自定义按钮。一个教程指出我应该使用 CreateWindow() 创建子窗口。但是，我已经从另一个关于创
javascript - div parent 和两个 child ，在其他 child 中获取一个 child 的id
我想在 jquery 中获取我的 svg 的 id，我尝试了这个 jquery，但它是未定义的。 $(event.target).children('svg').attr("id") Target.e

bug小助手

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Why does applying a CSS-Filter on the parent break the child positioning?(为什么在父对象上应用css过滤器会破坏子对象的定位？)