CSS filter disabled fixed position


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 (<a href="https://ygoe.github.io/Frontfire/modal.html" rel="nofollow">here's the code that does that</a>), 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, <em>always</em>.

<pre class="snippet-code-css lang-css prettyprint-override">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; } <pre class="snippet-code-html lang-html prettyprint-override"><main>

Main content

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

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

<a href="https://stackoverflow.com/questions/52937708/css-filter-on-parent-breaks-child-positioning" rel="nofollow">From what I've read now</a> 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.


just add filter to main and footer 1

main, #footer1 { filter: blur(1px); }


  • NSButton disabled title color always gray
  • False positives: junit.framework.AssertionFailedError: EditText is not found
  • CSS: IE: Version of style “background-color:rgba(…)”
  • Access 2007 forms with parameterized RecordSource
  • How can I include javascript in content loaded with jquery using $.ajax
  • Is it possible to collect a stream to two different collections using one line?
  • Finding for convolution kernel if many 0's for FFT?
  • CSS: How to fix overlapping divs
  • Return to second to last URL in MVC (return View with previous filter conditions applied)?
  • CKeditor stripping font tags instead of converting to span
  • How to remove all of a jQuery UI dialog when it is closed
  • Ionic Slide Up Slide Down Animation for only one view in sidebar
  • Android custom URI scheme incorrectly encoded when type in browser
  • How can I make this modal persistent?
  • LESS CSS how to modify parent property in mixin
  • HTML5 video only works in IE. The other browsers shows the black screen
  • What causes the runtime difference in this trivial fortran code?
  • Wrong labels when plotting a time series pandas dataframe with matplotlib
  • Prevent Tomcat from caching request during starup
  • What and where is mdimport
  • MonoTouch: How to download pdf incrementally as indicated in the Apple slides “Building Newsstand Ap
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • How to have background script and something similar to a default popup?
  • How to attach a node.js readable stream to a Sendgrid email?
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Android fill_parent issue
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Spring security and special characters
  • Align navbar back button on right side
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • retrieve vertices with no linked edge in arangodb
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Linking SubReports Without LinkChild/LinkMaster
  • How can I remove ASP.NET Designer.cs files?
  • Python/Django TangoWithDjango Models and Databases
  • java string with new operator and a literal