User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0 Build ID: 20141229214612 Steps to reproduce: Create a SVG with a mask inside and then try to translate mask position with css keyframes animation. See http://jsfiddle.net/wojtekjodel/kq3jpksj/14/ for a test case, there are two boxes: first is a mask showing underlying svg rectangle while second is a regular div. Both are animated using the same css animation. Actual results: Only the regular div is moving, animation is not working on an element being a svg mask. Expected results: Both boxes should move in the same way; open site in other mainstream browsers to see it working.

I don't think this is expected to work with Firefox yet. Changing component to see if it gets some attention.

Mozilla team, thank you for your help! A few more details on this one: The problem seems to affect animations targeted at the elements inside the <defs> SVG tag. For instance, given the following SVG object: <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" class="svgMask" width="111" height="135" viewBox="0 0 111 135"> <defs> <clipPath id="maskID510"> <path d="M56 0 A27 27 0 0 1 56 110 L56 0" data-svg-origin="56 55" style="transform-origin: 0px 0px 0px; transform: matrix(-1, 0, 0, -1, 112, 110);"></path> </clipPath> </defs> <title>Title</title> <desc>Desc</desc> <image clip-path="url(#maskID510)" width="111" height="135" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/image-to-be-masked.png"></image></svg> If you attempt to apply a transform to the <path> tag (such as 'rotation'), it will animate the mask correctly in Chrome and IE11, but not Firefox (in Firefox, no animation takes place.) In Chrome and IE11, the path object also seems to have a height and width when inspected, but in Firefox, both the height and width of the path appear to be '0'. If this bug is fixed, animated masking would become a possibility in all major browsers, which will open up a lot of possibilities for advanced webpage layouts. I would be happy to assist with any other details if needed. Thanks again!

You can do this already with SMIL so animated masking is already a possibility in all major browsers. IE11 can support SMIL via fakesmile.

The problem is not simply that CSS animations on non-rendered content are ignored. Animated masks are not being updated even when the animation is applied with JavaScript. See this demo: http://codepen.io/chrisgannon/pen/9930bd388d2358cf91a458d4bc2261f0

(In reply to Robert Longson from comment #3) > You can do this already with SMIL so animated masking is already a > possibility in all major browsers. IE11 can support SMIL via fakesmile. According to caniuse.com SMIL was deprecated in both Chrome and Opera as of version 45 and 32, respectively, with support 'expected to be dropped in some future version'. Edge also is listed as having no plans to adopt it and along with the lack of IE support and necessary polyfills (which isn't always a possibility, eg: when displaying SVGs on a site one doesn't control) it doesn't exactly seem like an ideal alternative. Reading elsewhere though there was a post mentioning FF is actually following the spec and it's other browsers that are being more permissive with their defs styling. Haven't looked into this but either way being able to animate masks via CSS in Firefox would certainly be useful.

(In reply to Springtime from comment #6) > Reading elsewhere though there was a post mentioning FF is actually > following the spec and it's other browsers that are being more permissive > with their defs styling. Do you remember the reference? I got asked about this on IRC, but the bug is UNCONFIRMED and I don't see anyone from our side even commenting on it, so making it clear whether this will ever be supported or not would be helpful for webdevs.

(In reply to Gian-Carlo Pascutto [:gcp] from comment #7) > Do you remember the reference? I got asked about this on IRC, but the bug is > UNCONFIRMED and I don't see anyone from our side even commenting on it, so > making it clear whether this will ever be supported or not would be helpful > for webdevs. It was a dev on Greensock.com [1] replying to someone who had encountered the same issue. It's also worth noting that even when outside outside of the <defs> block (whether or not that's the correct placement) masks still aren't affected by CSS animations in FF but are in other browsers like Chromium. Attempting to style paths/graphics referenced in a mask (eg: the source of a <use> element) also doesn't have an effect, so there doesn't appear to be a workaround apart from either complex nesting of foreignObjects for certain types of masks or SMIL, though it's deprecated and not fully supported everywhere. [1] http://greensock.com/forums/topic/12272-animating-svg-masks-clip-path-not-working-in-firefox/#entry60132

nsSVGMaskProperty should insert render observer into mask frame to receive rendering change.

Has this been resolved or is there a work around? I am trying to animate a mask as well for a major client project and will have to resort to creating a gif after I've already got he svg animation working in all browsers except FF.

(In reply to im.joey.brennan from comment #10) > Has this been resolved or is there a work around? I am trying to animate a > mask as well for a major client project and will have to resort to creating > a gif after I've already got he svg animation working in all browsers except > FF. The current workaround I used is to create the identical animation using SMIL contained within an SVG group and display it to Firefox only using a media query, while hiding by default in all other browsers. In my case I used @-moz-document url-prefix() {} as the media query to target Firefox within the embedded SVG CSS style. It's adds extra code and shouldn't be necessary but it's something for now.

This bug is not relative about animation. Apply a transform effect to gfx elements inside mask just not work on FF. I am looking into why transform is not work here. http://jsfiddle.net/kq3jpksj/24/

CSS transforms are not supported in indirectly rendered things such as masks, patterns or clip-paths because the rendering is done outside of a display list.

(In reply to Robert Longson from comment #13) > CSS transforms are not supported in indirectly rendered things such as > masks, patterns or clip-paths because the rendering is done outside of a > display list. Yes, no nsDisplayTransform been created while painting mask surface. No quick solution jump into my mind.

@cjku, did you intend to add a reviewer to your patch?

not yet, it's a WIP patch only

Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.)