CSS 过滤器禁用固定位置

Question

我有一个页面在过滤器被激活之前工作正常。footer元素末尾有一个body，设置fixed在视口的底部。现在我需要创建另一个footer具有相同定位的元素。它包含 a 的按钮form，为了使提交按钮起作用，它们必须位于该form元素内。

当页面上打开模式时（这是执行此操作的代码），背景会变暗并被过滤。但是，一旦该过滤器生效，第二个过滤器footer就不再位于视口的底部，而是位于其他页面内容的底部，可以在任何地方。

这是显示问题的示例。只需注释掉过滤器样式即可查看其外观。不同的颜色和高度仅用于说明目的。在我的应用程序中，所有页脚看起来都一样。事实上，我不再使用 footer2 但需要 footer1始终位于 footer2 所在的位置。

body>* {
  filter: blur(1px);
}

main {
  border: 2px solid #64e315;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
}

#footer1 {
  background: #dce2f8;
}

#footer2 {
  border: 2px solid #e38e15;
  text-align: center;
}

<main>
  <p>
    Main content
  </p>
  <p style="height: 150px;">
    <!-- Placeholder for fixed footer 1 -->
  </p>

  <footer id="footer1">
    Footer 1<br>Footer 1<br> Footer 1<br>Footer 1
  </footer>
</main>

<footer id="footer2">
  Footer 2
</footer>

从我现在读到的内容来看，我的印象是 CSS 规范要求这样做。我就是不明白为什么。为什么过滤器会影响任何布局？有什么办法可以防止这种情况发生吗？请记住，按钮必须位于表单中，否则将不起作用。

Answer 1

迟到的回答，但我遇到了同样的问题。

我设法通过替换为来解决fixed它sticky。它还需要更改一些其他属性，因为粘性定位元素的行为确实有所不同。但是，没有模糊的跳跃！