Are CSS3 filters supported ?

Question

Hello,

I'm trying to use CSS3 filters, like blur and graysclae, but it doesn't seem to work.

Any idea why ? Are these properties supported ?

Answer 1

Hi Sylvain,

Sorry, I don't think it is supported by windows store app, take a look at this documentation: http://msdn.microsoft.com/en-us/library/hh673536.aspx, in the visual effects section, the supported CSS3 features are list below, not include CSS3 filter: 

Topic	Description
CSS3 3-D Transforms	Translate, rotate, and scale elements in both 2-D and 3-D space.
CSS3 Animations	Animate elements by automatically varying CSS properties smoothly over time.
CSS3 Fonts	Access advanced typographic features in OpenType fonts that include them.
CSS3 Gradients	Add color gradients to any property that accepts images.
CSS3 Transitions	Create simple animations by smoothly changing CSS property values from a start value to an end value.
CSS3 Text	Apply a drop shadow to text, or automatically hyphenate blocks of text.

 

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

Hi James !

Thanks for your response ! That's pretty sad :(

What is strange is that IE10 supports it... Maybe there'll be an update later ?! Hope so !

Answer 3

Can you also give a full sample of what you are trying to do? That will help understand your question a little better.

---

Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

Answer 4

My goal is pretty simple : apply a CSS blur on an image, according to CSS3 specs.

HTML :

<img id="myImg" src="ms-appx:///images/myImg.png" />

CSS :

#myImg { filter: blur(10px); }

(I also tried with "ms-filter")

Answer 5

You should be able to do this. I know I've blurred text in an <svg> section, but I haven't tried an <image>.

In general anything you can render in IE you can render in a Windows Store app. They both use the same rendering engine.

--Rob

Answer 6

SVG blur is indeed available in Windows Store apps... but my goal needs to interact with HTML elements, what is not possible using SVG feGaussianBlur effect.

Answer 7

Hi Sylvain,

SVG blur is the only real option for Windows Store apps.

I suspect that the IE10 support you found was in legacy mode with the Visual Filters and Transitions feature that was deprecated in IE9. If you run the F12 debugger and set the mode to 10 I expect your code using those will no longer work. Windows Store apps always use the modern standards modes and so cannot use such legacy features.

There is an unrelated proposal for CSS Filter Effects (see https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html ). This is not implemented in IE. I believe it is currently only in webkit browsers.

--Rob