Firefox：如何在不破坏固定位置元素的情况下对整个页面进行灰度处理？ [英] Firefox: How to Grayscale an Entire Page without breaking fixed-positioned elements?
问题描述
为什么
我提交了此问题到Firefox。
摘要：即使规范允许您将过滤器应用于文档根目录，也避免了固定/绝对封装-后裔，我认为可以通过完全避免与修改尺寸和位置无关的过滤器上的这种行为来改进规范。灰度之类的过滤器对后代的大小或位置的影响应该为零，因此，无论在何处应用该过滤器（是否为根）都无关紧要。在诸如灰度之类的过滤器上，绝不应有任何后代包装。我正在W3C 此处解释它。
更新3：：@ NateG建议将过滤器应用于 body> * 。到目前为止，这似乎在Chromium和Firefox中都可以使用！见下文：
body> * {滤镜：灰度（100％）; }
#box
{
背景：红色；白颜色;
显示：inline-block;
边框：实心＃333333 10像素；
填充：5px；
头寸：固定；
最高：50％；
剩余：50％；
transform：translate（-50％，-50％）;
}
<！DOCTYPE html>
< html lang = zh-CN>
< head>
< title>过滤器损坏了固定位置< / title>
< / head>
< body>
< div id = box> Dead Center< div>
< / body>
< / html>
如果将过滤器应用于 body>怎么办？ * ？性能较差，但可以解决此问题。我承认没有完全考虑它可能引起的新问题，但是我想不出会改变第二深度元素的包含块的情况。
Why do CSS filters, (ones that seem to have nothing to do with size/positioning) break your ability to give descendant-elements a fixed position?
In addition to answering this question, please suggest a solution that addresses the problem I showcase below.
The CSS and HTML below simply produces a little red box in the center of the viewport:
#box
{
background: red; color: white;
display: inline-block;
border: solid #333333 10px;
padding: 5px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Before Filter Corrupts Fixed Positioning</title>
</head>
<body>
<div id ="box">Dead Center<div>
</body>
</html>
Now, let's assume we have a requirement that this whole page must be displayed in grayscale. The only effective change below, is the addition of a CSS grayscale filter. However, upon adding this filter, the box will no longer honor the center page positioning we prescribed:
body { filter: grayscale(100%); }
#box
{
background: red; color: white;
display: inline-block;
border: solid #333333 10px;
padding: 5px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Filter Corrupts Fixed Positioning</title>
</head>
<body>
<div id ="box">Dead Center<div>
</body>
</html>
Notice that the box is no longer centered vertically. Is this a bug, or is it just stupid by design?
Update 1:
Temani Afif recommended, in the comments, applying the filter on the html element (instead of the body element). While this does fix the issue in Chrome, it doesn't in Firefox 78:
html { filter: grayscale(100%); }
#box
{
background: red; color: white;
display: inline-block;
border: solid #333333 10px;
padding: 5px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Filter Corrupts Fixed Positioning</title>
</head>
<body>
<div id ="box">Dead Center<div>
</body>
</html>
Update 2:
Based on feedback, here I try applying the filter to :root, instead of html. While this does fix the issue in Chrome, it doesn't in Firefox 78:
:root { filter: grayscale(100%); }
#box
{
background: red; color: white;
display: inline-block;
border: solid #333333 10px;
padding: 5px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Filter Corrupts Fixed Positioning</title>
</head>
<body>
<div id ="box">Dead Center<div>
</body>
</html>
I submitted this issue to Firefox.
Summary: Even though the spec allows you to apply the filter to the document root, to avoid the encapsulation of fixed/absolute-descendants, I'm of the opinion that the spec could be improved by avoiding this behavior altogether on filters that have nothing to do with modifying size and position. Filters like grayscale should have zero impact on the size or position of descendants and therefore it shouldn't matter where you apply that filter (root or not). On filters like grayscale, there should never be any wrapping of descendants. I am explaining it to the W3C here.
Update 3: @NateG recommended applying the filter to body > *. So far, that seems to work in both Chromium and Firefox! See below:
body > * { filter: grayscale(100%); }
#box
{
background: red; color: white;
display: inline-block;
border: solid #333333 10px;
padding: 5px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Filter Corrupts Fixed Positioning</title>
</head>
<body>
<div id ="box">Dead Center<div>
</body>
</html>
What if you apply the filter to body > *? Less performant, but may solve this issue. I admit to not fully considering new issues it may raise, but I can't think of a scenario in which it would alter the containing block of second depth elements.
这篇关于Firefox：如何在不破坏固定位置元素的情况下对整个页面进行灰度处理？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
