title: Chrome, css filter blur and scale at children and overflow hidden on parent results glowing edges
body: <p>Parent div has <code>overflow:hidden</code>, and the child element is <em>scaled</em> and <em>blured</em> on <code>:hover</code>, <em>with transition</em>. While animated you can see <em>glowing edges</em> ( I use <code>transform:scale()</code> strictly to avoid this, but it gets worse). <br><em>I am using Chrome 39.0.2171.99 m</em>.</p>
  
  <p><a href="http://jsfiddle.net/3t5dyn9e/" rel="nofollow">JSFiddle</a></p>
  
  <pre><code>&lt;div class="overflow"&gt;
      &lt;div class="inner"&gt;
          Hover
      &lt;/div&gt;
  &lt;/div&gt;
  
  .overflow{
      width: 200px;
      height: 200px;
      overflow: hidden;
  
  }
  .inner{
      width: 100%;
      height: 100%;
      background: green;
      transform: scale(1);
      filter: blur(0px);
      transition: all 0.5s ease-in-out;
  }
  .overflow:hover .inner{
      transform: scale(1.1);
      filter: blur(10px);
      -webkit-filter: blur(10px);
  }
  </code></pre>