Question

Demo page

<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%);
}

将filter:blur(1px)（或任何其他filter）赠送给定位元素（Firefox）的父级会使浏览器忽略该子项的位置。

有没有人遇到过这种情况并知道解决这种烦恼的方法？

在FF48 beta / win7上测试

Answer 1

这是因为绝对定位的元素相对于它们的containing block定位，这是由它们最近的位置祖先建立的，或者如果没有这样的祖先则是初始包含块。

然后，如果您不使用filter，则包含的块将是初始块，其尺寸与视口相同。

但是，如果您在filter上使用body，即使对于绝对定位的后代，也会建立一个包含块。就像你使用position: relative。

一样

＆＃13;

body {
  position: relative;
}
div {
  background: blue;
  margin: auto;
  position: absolute;
  right: 0;
  top: 50%;
  left: 0;
  height: 200px;
  width: 200px;
  transform: translateY(-50%);
}

＆＃13;

<div></div>

＆＃13;

相反，我建议在filter上设置html，并使用height: 100%使其与视口一样高。

＆＃13;

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%);
}

＆＃13;

<div></div>

＆＃13;

Answer 2

body{ 
  -webkit-filter:blur(2px); 
  filter:blur(2px); 
  /* setting the viewport height on body */
  min-height: 100vh;
}

div{
  background: blue;
  margin: auto;
  position: absolute;
  right: 0;
  top: 50%;
  left: 0;
  height:200px;
  width: 200px;
  transform: translateY(-50%);
}

<div></div>

将主体设置为视口的最小高度似乎有效。

家长的Firefox位置错误＆＃34; filter＆＃34;

Demo page

2 个答案: