Equivalent for `-moz-element` in other browsers?

Question

I want to create an opacity blur overlay, similar to Windows Aero or iOS7. Unfortunately the filter: blur() or filter: url(#svgBlur) properties can only apply to the element, not content behind it.

To get round this we need a copy of the background that is blurred. This is possible in FX using the background: -moz-element(#elementId) experimental CSS property. Using that I can get the effect I want in FX only.

There are other questions about solving the blur problem, and one solution appears to be the use of the html2Canvas plug in.

However that is recreating the entire blurred content, including manually recreated styles and the like. It's very impressive work, but it seems like massive overkill (both in performance and size) for this kind of effect.

What I want to do is create is some kind of shim just for -moz-element. It looks like that should be possible using an SVG foreignObject, but that has both security issues and fails if your HTML is not valid XML.

Is there any way round of emulating -moz-element (using canvas, SVG, or something else) where I don't have to parse/redraw the entire overlaid area?

Answer 1

Browsers that support the BackgroundImage pseudo input allow you to filter the content behind an element. Opera 12 supports that and maybe some other UAs too.

I think Opera 12 also supports the SVG 1.2 Tiny feature of having an external foreignObject i.e.

<foreignObject xlink:href="external file url"/>

You could combine this with the backgroundImage to have html content as a background even if the html content was not not valid XML.

Your milage may vary with other UAs though and as you say Firefox has a different solution.