父级的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中是一样的，我不知道为什么。如果有人可以发布应用了过滤器的工作片段并解释为什么它之前不起作用，我会非常感激。
江户川乱折腾3回答
-
慕妹3146593
您的答案的更多上下文：此GitHub问题添加了一个规范，即当filter具有除以外的值时创建包含块none。GitHub问题还有一个链接到讨论决定的地方，这个代码示例（存档链接）用于说明包含块设计用于修复的模糊性。 -
月关宝盒
首先它不是bug，它的设计就像我们不喜欢的许多功能，但我们应该使用（清除浮动，边缘折叠等），所以你应该调整你的代码以克服这个问题。没有通用的解决方案，但根据您的情况，肯定有一个解决方案。您可以通过添加特定代码来提出问题，以便了解我们是否可以修改您的逻辑以保持您的要求并解决问题。
随时随地看视频慕课网APP
CSS3
Html/CSS