locked
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 ?

    Friday, November 15, 2013 7:21 AM

All replies

  • 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.


    Friday, November 15, 2013 2:11 PM
    Moderator
  • 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 !

    Friday, November 15, 2013 9:46 PM
  • 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

    Saturday, November 16, 2013 1:27 AM
    Moderator
  • 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")

    Saturday, November 16, 2013 11:07 AM
  • 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

    Saturday, November 16, 2013 3:47 PM
    Moderator
  • 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.
    Saturday, November 16, 2013 10:40 PM
  • 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

    Tuesday, November 19, 2013 4:11 AM
    Moderator