CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3141603
user3141603

Reputation:

Set blur on DIV

I want to add blur to few DIVs, so I add this to the CSS:

.div{
    -webkit-filter: blur(20px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    filter: blur(15px);
}

The problem is that when I'm scrolling the window, it scrolling with lags. This is not the only problem - this code isn't working on all browsers if I'm not mistaking. So how can I add a blur to a DIV?

Upvotes: 2

Views: 285

Answers (3)

Nate Whittaker
Nate Whittaker

Reputation: 1966

The bigger the blur, the more memory-intensive it will be for the browser to render (see here).

To get any filter to work in Firefox, you'll need to define it in SVG (e.g. for blur) and link to it using the filter style's url() variant. This approach should also work for versions of IE greater than 9.

Older IE has its own equivalent filter style you can use. If all else fails, you can use Modernizr to detect support for the filter style and make the appropriate fallback adjustments (would need to add non-core detects for css-filters and svg-filters).

Upvotes: 0

koningdavid
koningdavid

Reputation: 8085

As you can see in the link below, CSS filters are not that well supported. That's why it's not working in every browser.

http://caniuse.com/css-filters

As for the lag, you should post an example, because this should't have anything to do with the lag.

Upvotes: 0

Samuel O
Samuel O

Reputation: 2258

There is no cross-browser solution in pure CSS for this.
Even in CSS3.

You can still use Blur.js library (http://blurjs.com/),
it's crossbrowser but you need import javascript to your page.
(not be problem because blur is mostly just fancy effect).

Also this is nice DEMO (http://tympanus.net/Tutorials/ItemBlur/)
with description what is going on (http://bit.ly/1aOE8uM) ..

Can helps you.

Upvotes: 1

Related Questions