css - 为什么在父项上应用 CSS-Filter 会破坏子项定位？-6ren

css - 为什么在父项上应用 CSS-Filter 会破坏子项定位？

转载作者：行者123 更新时间：2023-11-28 00:02:05

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

$(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>

接下来是完全相同的片段，但增加了一个:我应用了一个过滤器，就我而言，它纯粹是装饰性的:filter: brightness(1.3);。

正如您在下面看到的，当您在“动画”中滚动到一半时，标题就消失了。当您检查该元素时，它仍然具有所有属性，但不知何故消失了。这在 Firefox 和 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>

最佳答案

如果我们引用 the specification我们可以阅读:

A value other than none for the filter property results in thecreation of a containing block for absolute and fixed positioneddescendants unless the element it applies to is a document rootelement in the current browsing context. The list of functions areapplied in the order provided.

这意味着您的 position:fixed 元素将相对于过滤后的容器定位，而不再是视口(viewport)。换句话说，它仍然是固定的，但在它的新包含 block (过滤容器)中

这是一个简化的版本来说明这个问题:

.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>

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

.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>

这是一个非详尽的¹属性列表，导致为绝对和固定定位后代创建包含 block

过滤器
转换 ^ref
backdrop-filter ^ref
透视 ^ref
包含 ^ref
容器 ^ref
转换样式 ^ref
内容可见性 ^ref
will-change 当与上述值之一一起使用时

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

¹:我会尽量更新此列表。

关于css - 为什么在父项上应用 CSS-Filter 会破坏子项定位？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55942859/

文章推荐： css - 使用 JS 小部件时忽略父样式

文章推荐： javascript - 如何修复 CodeMirror 中的输入问题

文章推荐： html - 为什么第 nth-child 会选择所有这些？

文章推荐： html - 如何在框中以正确的大小放置文本，垂直输入？

c# - Silverlight:单击子按钮时将焦点放在父 ListBox 项上
我有以下 XAML 代码，删除了样式和格式标记:
flutter 。将一个 Draggable 项拖到另一个 Draggable 项上
我有下面的板。有一个覆盖( Stack )的 2 x 10 小部件，一些透明的小部件是 DragTargets在它们之上，相同的宽度和高度有 Draggable . Draggable那些是包含图像的
c# - XmlSerializer.Deserialize 在 List<> 项上
我已经尝试了所有可以在 SO 和其他地方找到的解决方案，但似乎无法弄清楚为什么这不起作用。将 XML 字符串直接反序列化为一个对象，该对象具有一个属性 - 一个列表: [XmlTypeAttribu
angularjs - 识别 ng-repeat 项上 ng-change 的事件源
如果我有...... 如何获取对引发 update() 调用的特定选择的引用？最佳答案像这样&heres fiddle :
java - 在我的自定义 ListView 项上，为什么 (string.length() <= 0) 始终为真，而 (string == "") 始终为假？
我已经创建了一个自定义的 ListView 适配器/项。该项目包含一个 CheckedTextView 和一个 TextView。在适配器的 getView() 方法中，创建自定义项并在它返回之前立

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 为什么在父项上应用 CSS-Filter 会破坏子项定位？