CSS filter property changes height of inner DIV

Question

I have noticed that setting the CSS filter property affects the height of a child div under certain circumstances.

My child div needs to be position: fixed; and height: 100%; In combination with the filter property there is a strange side-effect.

Consider this code:

.outer-div {
    filter: blur(5px);
}

.inner-div {
    position: fixed;
    height: 100%;
    
    min-height: 100px; /* Without this min-height, the DIV would be invisible with filter */ 

    /* Not relevant styling, just for making DIV visible */
    background-color: pink; 
    width: 200px;     
}

<div class="outer-div">
  <div class="inner-div">
  </div>
</div>

In this example, the height of the inner div is not 100% anymore. Without the additional min-height: 100px; the inner div would be completely invisible when there is a filter property.

Toggling the filter property in browser's development tools clearly shows the weird phenomenon: Without filter, the height is 100%, with the filter it is just 100px.

Additional information:

The value of the filter property doesn't seem to matter. Except none, all values I have tried affect the height.
The phenomenon occurs in recent versions of both Chrome and Firefox.

Questions are now

Why is this the case? Is this intended like this? Or is it a problem in the CSS standard? Or a bug in the implementations?
Anyway: How can I solve this problem? The inner div needs the be height: 100% even with the filter property of the outer div.

CSS filter property changes height of inner DIV

0 Answers0