Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webkit Backdrop Filter with JavaScript cross-browser

I have seen this amazing demo of the new

-webkit-backdrop-filter: blur(Xpx);

and I would like to ask how to reproduce this with JavaScript that at least works in Chrome but possibly in Firefox too?

The Demo: https://webkit.org/demos/backdrop-filter/

like image 963
Laszlo L. Mári Avatar asked Mar 12 '16 23:03

Laszlo L. Mári


People also ask

Does Safari support backdrop filter?

Safari 3.1 to 8 doesn't not support CSS Backdrop Filter.

Does backdrop filter work in Chrome?

The newest release of Google Chrome makes it possible with just a couple lines of CSS, thanks to the implementation of the backdrop-filter property!

What is Webkit backdrop filter?

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.

Does backdrop filter work on Firefox?

While Firefox does not support the backdrop filter property, you can still test your web pages that use backdrop-filter. You can enable the property manually, however, just enabling it in your browser won't help, because it won't be enabled in your client's browser.


1 Answers

You could try svg filters:

http://codepen.io/MakiBM/pen/YGEgQK?editors=1000

<svg x="0px" y="0px" width="500px" height="500px" viewbox="0 0 500 500">
  <defs>
    <filter id="blur" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpaceOnUse">
      <feGaussianBlur x="50" y="50" width="400" height="400" stdDeviation="10" in="SourceGraphic" result="blurImg"/>
      <feComponentTransfer in="blurImg" result="opaqueBlur">
        <feFuncA type="linear" intercept="1"/>
      </feComponentTransfer>
      <feBlend mode="normal" in="opaqueBlur" in2="SourceGraphic"/>
    </filter>
  </defs>

   <image filter="url(#blur)" x="10" y="10" id="svg-image" width="100%" height="100%" xlink:href="https://www.nycgovparks.org/photo_gallery/full_size/14413.jpg" />

    <rect x="50" y="50" height="400" width="400" fill="rgb(255,255,255)" fill-opacity="0.2" />
</svg>

I haven't go round with crossbrowser check but support is very wide: http://caniuse.com/svg-filters

like image 93
Bartek Maki Makoś Avatar answered Oct 18 '22 21:10

Bartek Maki Makoś