search

javierbyte / react-blur

React component to blur image backgrounds using canvas.
https://javier.xyz/react-blur/
BSD 3-Clause "New" or "Revised" License
458 stars 48 forks source link

Why not just use dynamic CSS filters? #2

Closed gsans closed 9 years ago

gsans commented 9 years ago

filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: url(#blur);

http://blog.gospodarets.com/css-filters/?src=http://malyw.github.io https://github.com/Schepp/CSS-Filters-Polyfill http://caniuse.com/#feat=css-filters

javierbyte commented 9 years ago

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.

gsans commented 9 years ago

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" notifications@github.com 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 https://github.com/javierbyte/react-blur/issues/2#issuecomment-77801579.

javierbyte commented 9 years ago

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.

RangerMauve commented 9 years ago

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

gsans commented 9 years ago

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" notifications@github.com 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 https://github.com/javierbyte/react-blur/issues/2#issuecomment-78051130.

javierbyte commented 9 years ago

Closing this for now. I will create another component based on https://github.com/javierbyte/react-blur/issues/2#issuecomment-78012466 and if it is not fast enough for mobile, I will investigate doing css blur with canvas as fallback, as suggested by gsans.

mull commented 9 years ago

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.