title: CSS Filter cancels element position
body: <h2><a href="http://jsbin.com/nocokivile/edit?html,css,output" rel="nofollow noreferrer">Demo page</a></h2>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    -webkit-filter: blur(2px);
    filter: blur(2px);
  }
  
  div {
    background: blue;
    margin: auto;
    position: absolute;
    right: 0;
    top: 50%;  /*  &lt;---- ignored */
    left: 0;
    height: 200px;
    width: 200px;
    transform: translateY(-50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Giving <code>filter:blur(1px)</code> (or any other <a href="https://developer.mozilla.org/en/docs/Web/CSS/filter" rel="nofollow noreferrer">filter</a>) to a parent of a positioned element (Firefox) makes the browser ignore the child's position.</p>
  <p>Has anyone encountered that and know a way to fix this annoyance?</p>
  <hr />
  <p><em>Tested on FF48 beta / win7</em></p>