父的CSS过滤器破坏了子的位置
我目前正在网站上，遇到这种奇怪的行为。我不确定这是一个错误还是如何解决它，所以我想向您寻求帮助。
因此，我有这个标题屏幕的“动画”，该标题的标题位于全屏页面的中央，当您向下滚动时，标题变小并保留在页面顶部。这是一个具有预期行为的工作示例，从中我剥离了所有不必要的代码以使其最小化：
$(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>
问题答案：
如果我们参考规范我们可以阅读：
过滤器属性的非空值将导致 为绝对定位和固定定位的 后代 创建一个 包含块，
除非其所应用的元素是当前浏览上下文中的文档根元素。功能列表按提供的顺序应用。
这意味着您的position:fixed元素将相对于过滤后的容器而不是视口放置。换句话说，它仍然是固定的，但是在其 新的 包含块（过滤容器）中
这是一个简化的版本来说明此问题：
.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>
这是属性的非详尽列表1，该列表 导致为绝对和固定位置的后代创建一个包含块
filtertransformbackdrop-filterperspectivecontaintransform-stylewill-change当与上述值之一一起使用时
如果某个属性的任何非初始值都会导致该元素为绝对定位的元素生成一个包含块，则在will-
change中指定该属性必须使该元素为绝对定位的元素生成一个包含块。
1：将尝试使此列表保持最新。
-
已安装虚拟盒，模拟器已停止工作。在做了一些研究之后，我的猜测是它以某种方式破坏了我的Hyper-V。它说： 无法启动模拟器模拟器无法启动，因为虚拟机监控程序没有运行。可能的原因是启用了硬件辅助虚拟化。检查计算机的BIOS，确保启用了硬件辅助虚拟化和硬件辅助数据执行保护功能。 我做到了。一切都按照它们应该的样子设置好了。我按照这个指南卸载了Virtualbox，包括它的驱动程序:https://do
-
我需要在svg图像上使用滤镜来改变颜色，但它在IE上不起作用。 我看了一下，发现这是因为它不受支持，但我需要另一种方法来做到这一点。我需要更改颜色，填充不是一个选项。有没有办法让过滤器在IE上工作？ 滤镜:亮度(0)饱和(100%)反转(100%)棕褐色(0%)饱和(25%)色调-旋转(70度)亮度(108%)对比度(108%)；
-
注意：我在Chrome应用程序中使用来自webview的YouTubeIframe。 这是YouTube的API声明： videoSyndicated参数允许您将搜索限制为只能在youtube.com以外播放的视频。如果为此参数指定值，还必须将type参数的值设置为video。 videoLicense参数过滤搜索结果，以仅包括具有特定许可证的视频。YouTube允许视频上传者选择将知识共享许可或
-
问题内容： 最近将grails项目升级到了2.3.7，并将插件更新到了最新版本，从而将Resources插件升级到了1.2.7。这在Grails 2.1.2和资源插件1.2RC3上可以很好地工作，但现在还不能： 每当我有一个CSS文件通过这样的URL引用某些内容时 在网页上，它会导致此错误（它在URL的前面保留了“ resource：/”） GET资源：/img/uniform-assets/ch
-
我使用悬停库创建一个动画时，用户悬停在一个
-
问题内容： 我知道，在同一句子中使用JavaScript和’atomic’一词有点奇怪，因为JavaScript被认为是异步的，因此不是很原子。 //编辑这是我的错误！通过关闭警报（并在chrome中隐藏其他警报），警报迅速中断并让其他代码运行。JavaScript是单线程的。 快速- >实际问题； 在哪种情况下，我们可以从异步回调中断中保存代码，如何防止某些代码块使用它们？ 长- >我的场景；