filter属性对fixed布局的影响

现象

当在元素中使用了filter滤镜属性的时候，会导致内部 fixed 元素定位发生错误，即不再相对 viewport 进行定位，而是相对整个filter属性的容器元素进行定位。

	<style type="text/css">
    .footer {
      position: fixed;
      width: 200px;
      height: 100px;
      bottom: 100px;
      left: 100px;
    }
    .footer .inner {
      height: 100%;
      background-color: #eee;
    }

    .main-content {
      border: 1px solid red;
      height: 300px;
      filter: blur(2px);
    }

  </style>
  
  <div class="main-content">
    hahahahaha
    <div class="footer">
      <div class="inner">footer here</div>
    </div>
  </div>

正常情况下

容器使用了filter属性之后

解决方案

目前实验下来，是只能不使用filter属性来修复了。