父母使用“过滤器”的Firefox位置错误 [英] Firefox position bug by parent with "filter"
问题描述
演示页面
< body>
< div>< / div>
< / body>
body {-webkit -filter：模糊（2px的）;滤波器：模糊（2px的）; }
div {
background：blue;
margin：auto;
position：absolute;
right：0;
top：50％;
剩下：0;
height：200px;
width：200px;
transform：translateY（-50％）;
赋予 filter：blur（1px）（或任何其他过滤器） （Firefox）使浏览器忽略孩子的位置。
有没有人遇到过，并且知道解决这个问题的方法？
经过FF48 beta / win7测试
这是因为绝对定位的元素相对于它们的的详细信息 =noreferrer>或包含初始包含块。
<然后，如果你不使用 filter ，那么包含块将是最初的那个，它与视口具有相同的尺寸。
但是，如果在 body 上使用 filter ，则将建立一个包含块，即使是绝对定位的后代。这将是如果您使用位置：相对。
body {position：relative;} div {background：blue;保证金：汽车;位置：绝对;正确：0;顶部：50％;左：0; height：200px;宽度：200px; transform：translateY（-50％）;}
<我不推荐使用这个功能，但是我建议你设置一个名为 过滤器在 html 上，并使用 height：100％来使其与视口一样高。
html {height：100％; -webkit-filter：blur（2px）; filter：blur（2px）;} div {background：blue;保证金：汽车;位置：绝对;正确：0;顶部：50％;左：0; height：200px;宽度：200px; transform：translateY（-50％）;}
< div>< / div>
<body>
<div></div>
</body>
body{ -webkit-filter:blur(2px); filter:blur(2px); }
div{
background: blue;
margin: auto;
position: absolute;
right: 0;
top: 50%;
left: 0;
height:200px;
width: 200px;
transform: translateY(-50%);
}
Giving filter:blur(1px) (or any other filter) to a parent of a positioned element (Firefox) makes the browser ignore the child's position.
Has anyone encountered that and know a way to fix this annoyance?
Tested on FF48 beta / win7
解决方案 That's because absolutely positioned elements are positioned relatively to their containing block, which is established by their nearest positioned ancestor, or the initial containing block if there is no such ancestor.
Then, if you don't use filter, the containing block will be the initial one, which has the same dimensions as the viewport.
However, if you use filter on body, that will establish a containing block, even for absolutely positioned descendants. It will be like if you used position: relative.
body {
position: relative;
}
div {
background: blue;
margin: auto;
position: absolute;
right: 0;
top: 50%;
left: 0;
height: 200px;
width: 200px;
transform: translateY(-50%);
}
<div></div>
Instead, I recommend setting the filter on html, and use height: 100% to make it as tall as the viewport.
html {
height: 100%;
-webkit-filter: blur(2px);
filter: blur(2px);
}
div {
background: blue;
margin: auto;
position: absolute;
right: 0;
top: 50%;
left: 0;
height: 200px;
width: 200px;
transform: translateY(-50%);
}
<div></div>
这篇关于父母使用“过滤器”的Firefox位置错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
