CSS filter disabled fixed position

Question

I've got a page that works fine until the filters get activated. There's a footer at the end of the body element which is set up to be fixed at the bottom of the viewport. Now I needed to create another footer element with the same positioning. It contains buttons for a form, and in order for the submit buttons to work, they have to be within the form element.

When a modal opens on the page (here's the code that does that), the background is dimmed and filtered. But as soon as that filter is in effect, the second footer is no longer at the bottom of the viewport but rather at the bottom of the other page content, which can be anywhere.

Here's the sample that shows the issue. Just comment out the filter style to see how it should look like. The diverse colours and heights are only set for illustration purposes. I my app, all footers look the same. In fact I'm not using footer2 anymore but need footer1 to be where footer2 is, always.

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 I have the impression that the CSS spec requires this to be. I just cannot understand why. Why should a filter affect any layout? And is there a way I can prevent this? Remember, the buttons need to be in the form or they won't work.

applying filter to everything isn't a good idea btw .. one filter should be enough — Temani Afif, Nov 25 '18 at 19:35
The filter is applied by framework code. When the modal (not shown here) opens, all background (except the modal element which is excluded) needs to be blurry. There is no single element to apply the filter on. Anyway, it shouldn't make a difference here. — ygoe, Nov 25 '18 at 19:39
what is the framework? do you have any upper container than the main, between the body and the main? — Temani Afif, Nov 25 '18 at 19:45
Well, [I wrote it myself](https://github.com/ygoe/Frontfire) but it's not tied to this web page. I cannot assume any intermediate container, this should work with any page structure. And additional markup would just look unclean. — ygoe, Nov 25 '18 at 19:51
I guess this is a good example to show how it works : https://ygoe.github.io/Frontfire/modal.html ... you can add it to the question I guess — Temani Afif, Nov 25 '18 at 19:58

score 0 · Answer 1 · answered Sep 19 '22 at 20:55

Late answer, but I was running into the same problem.

I managed to get around it by just replacing fixed with sticky. It also required changing some other attributes as sticky positioned elements do behave somewhat differently. But, there was no jump with blur!

CSS filter disabled fixed position

1 Answers1