[Modal] Setting blurring to true brings modal down intermittently.

[MrL1605]

Bug Report

If a modal with blurring set to true is opened, header (any fixed position content) shifts down according to the margin of non-fixed content.

Related issue in Semantic-UI which fixes the fixed contents. This was a permanent issue before and the fix was to restore the view after modal is closed as mentioned in the comment.

Right now I'm using a workaround by using padding instead of margin for the non-fixed content and it works beautifully.

Would like to know if fixing this is even possible in first place? If yes, I would like to contribute to fix this, if someone would give me a few hints on how to fix this.

Steps to reproduce

• Open the modal with option "blurring: true".
• All "position: fixed" contents shift in different ways.
• Close the modal and everything looks fine again.

Expected result

Fixed header bar should remain on top.

Actual result

Fixed header bar comes down proportional to the margin of non-fixed content (ie. bigger the margin, more header goes down)

Testcase

https://codepen.io/mrl1605-the-decoder/pen/MWyMLGa

Screenshot (if possible)

Attached above

Version

2.8.7

[ko2in]

As described in the CSS specification:

A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided.

So, if you wrap the fixed element within a container, and the filter applies to the container, which results in the creation of another block for absolute and fixed positioned which thus shift your fixed and absolute element positions.

There will be several ways to avoid this issue. You should place the fixed element into the DOM root tree. (https://jsfiddle.net/ko2in/0oc8xbzq/3/).

Or you should applied the container element as inline-block (https://jsfiddle.net/ko2in/0oc8xbzq/17/). I refer MDN specification:

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

You can also use overflow property (https://jsfiddle.net/ko2in/0oc8xbzq/18/), but not a very good solution if you need some overflow elements like dropdown or popup.

[MrL1605]

That was easier than expected.

Thanks a lot.