Webkit Fondale Filtro con JavaScript cross-browser

Question

Ho visto questo stupefacente demo del nuovo

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

e vorrei chiedere come riprodurre questo con JavaScript che almeno funziona in Chrome, ma forse anche in Firefox ?

la demo: https://webkit.org/demos/backdrop-filter/

Answer 1

Si potrebbe provare filtri SVG:

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> 

non ho andare in giro con il check crossbrowser ma il supporto è molto ampia: http://caniuse.com/svg-filters