Why not just use dynamic CSS filters? about react-blur HOT 7 CLOSED

Sounds interesting! But as far as I know, there is no way to do blur with CSS in IE10+, as mentioned in your second link https://github.com/Schepp/CSS-Filters-Polyfill#a-word-regarding-ie-10 the only way to do blur in IE is using svg.

It would be interesting to create another component using only css filters, though.

from react-blur.

You are completely right. Using the right tool for the right job in
technology takes time.

Your approach works but can't be as performant as CSS that uses hardware
acceleration. Think about the calculations you are doing in a mobile phone.

In order to see that with numbers you can try
https://github.com/mrdoob/stats.js

with different approaches.

Going forward I would use your code for the cases where CSS is not
available. You can check those cases with Modernzr. In this way you can
still use your code or CSS filters whichever is best (desktop, mobile, etc)

Good work! There are some other interesting filters libraries
http://evanw.github.io/glfx.js/docs/
http://camanjs.com/
http://mezzoblue.github.io/PaintbrushJS/demo/usage.html

Gerard
On 9 Mar 2015 05:17, "Javier Bórquez" [email protected] wrote:

Sounds interesting! But as far as I know, there is no way to do blur with
CSS in IE10+, as mentioned in your second link
https://github.com/Schepp/CSS-Filters-Polyfill#a-word-regarding-ie-10 the
only way to do blur in IE is using svg.

It would be interesting to create another component using only css
filters, though.

—
Reply to this email directly or view it on GitHub
#2 (comment).

from react-blur.

Probably we can get a very smooth blur transition of we pre-render some images (like with 0px, 10px, 20px and 30px of blur radius), stack them, and then just fade one by one. The blurred canvas are just images after all, and opacity changes on the images should be even faster than the css blur.

Let me try it, I will create and experiment for this over the weekend.

from react-blur.

CSS Filters were originally ripped off from SVG so I doubt they're all that much better.

from react-blur.

I don't know about that but its not what I have seen.

http://blog.chromium.org/2012/06/accelerated-css-filters-landed-in.html

As I said, add the performance tracing tool and check for different
devices. Mainly mobile as desktop will obviously perform better.

Don't take my word. Check it.
On 10 Mar 2015 13:22, "RangerMauve" [email protected] wrote:

CSS Filters were originally ripped off from SVG so I doubt they're all
that much better.

—
Reply to this email directly or view it on GitHub
#2 (comment).

from react-blur.

Closing this for now. I will create another component based on #2 (comment) and if it is not fast enough for mobile, I will investigate doing css blur with canvas as fallback, as suggested by gsans.

from react-blur.

Bear in mind CSS blur can be really troublesome. With our testing we actually changed to this component because CSS blurring was just way too slow. Not slow initially, but whenever we scroll or animate items that move our blurred image it seems to be re-blurring a ton.

from react-blur.