On Sep 7, 2015, at 8:00 PM, news.gmane.org<http://news.gmane.org> <[email protected]<mailto:[email protected]>> wrote:
Currently, Firefox seems the only browser supporting CSS3 filters. Rendering the Gaussian blur filter, Firefox renders the element's background edges as alpha. This looks quite nasty, particularly when used on the root element (or <body> element). See this Pen for a brief demonstration: http://codepen.io/anon/pen/avOBYE I suggest to add an optional property to the Gaussian blur filter, determining whether the image's edges are supposed to be alpha'd or whether the image shall be tiled internally to have edges still appear blurred, yet fully opaque. IIRC what you are asking for can be archived with the filter effects spec in two ways: 1) The CSS image filter function [1] With the CSS image filter function you can blur an image and use it as background. If you use the blur function, it will not make the edges transparent. This is currently supported by WebKit/Safari with a prefix. Example: background: -webkit-filter(“image.png”, blur(4px)); background: filter(“image.png”, blur(4px)); 2) The SVG filter feGaussianBlur with edgeMode=duplicate.[2] Apply and SVG filter to an HTML or SVG element. This works in WebKit/Safari with the -webkit prefix. It might work in Firefox or Chrome without prefix already. <filter id=“filter”> <feImage width=“100%” height=“100%" xlink:href=“image.png”/> <feGausianBlur stdDeviation=“4” edgeMode=“duplicate”/> </filter> <div style=“filter: url(#filter); -webkit-filter: url(#filter)”> Your blurred content </div> Greetings, Dirk [1] https://drafts.fxtf.org/filters/#FilterCSSImageValue [2] https://drafts.fxtf.org/filters/#element-attrdef-fegaussianblur-edgemode If so, tiling should occur mirrored, like this: ╔|╗|╔ ╚|╝|╚ Axel Dahmen
