Feature/hack request: retaining sharp edge of the blurred content container

[smokingbarrel]

This is an awesome filter collection. My site is based on full screen images and I'd like to use blur filter in conjunction with modal. When I fire the modal the background blurs, but the edges (the entire content area in my case) gets this unsightly feathering.

Now, I do understand that Polyfill doesn't do anything wrong here; but I wonder if there any possibility to come up with some sort of hack which would allow to use this blur effect while retaining the sharp edge of the containing element? This illustrates what I'm talking about http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

Thanks!

[Schepp]

Hi!

Have you tried wrapping the blurred element into an element with overflow: hidden? That might work.

[smokingbarrel]

Who would've thought that this would work! Thanks a lot, this is really killer feature (mainly because of iOS7).

[smokingbarrel]

Hello again, After messing with the proposed fix, I realized that it works partially. This would work nicely when browser is close to 3:4 ratio, but when you go to a wider ratio you can see that feathering is happening on the sides (snippet: http://codepen.io/0leg/full/CzLIF)

I've addressed the same issue in stackoverflow as well (http://stackoverflow.com/questions/19902204/hiding-feathered-edges-when-using-css-filters-polyfill)

[Schepp]

It shouldn't have to do with the browser's aspect ratio. You need to fit the outer overflow: hidden to exactly the size of the blurred element and it should work. How to fit the size depends on the element you want to filter and which type of wrapper you have around.