CSS过滤器已禁用固定位置

Question

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

在页面（here's the code that does that）上打开模式框时，背景变暗并被过滤。但是，一旦该过滤器生效，第二个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>

From what I've read now我的印象是CSS规范要求做到这一点。我只是不明白为什么。为什么过滤器会影响任何布局？有办法防止这种情况吗？请记住，按钮必须采用表格形式，否则将无法使用。