1118710 - SVG mask animation is not working

Status: RESOLVED DUPLICATE of bug 1323962

(Core :: SVG, defect, P2)

Description

[Wojtek Jodel]

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.

Comment 1

[[SV Manager] Florin Mezei, QA (:FlorinMezei)]

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

Comment 2

[mwarchola]

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!

Comment 3

[Robert Longson [:longsonr]]

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

Comment 4

[Amelia Bellamy-Royds]

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

Comment 5

[Springtime]

Ran into this issue while making an SVG mask that requires animating. Chromium handles mask animations as expected.

Would be a welcome addition to see this functionality in Firefox as paths outside masks support CSS animation, and CSS animations are more compact and easier to change for animating multiple different attributes in a single keyframe block, apart from being more consistent with any existing inline CSS applied.

Comment 6

[Springtime]

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

Comment 7

[Gian-Carlo Pascutto [:gcp]]

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

Comment 8

[Springtime]

(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

Comment 9

[u459114]

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

Comment 10

[im.joey.brennan]

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.

Comment 11

[Springtime]

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

Comment 12

[u459114]

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/

Comment 13

[Robert Longson [:longsonr]]

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.

Comment 14

[u459114]

Attachment: mask-transform.html

Comment 15

[u459114]

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

Comment 17

[u459114]

Attachment: Bug 1118710 - (WIP) use display list to generate the content of an SVG mask

To use display list for rendering an SVG mask, we need to
1. enable nsSVGMaskFrame::ReflowSVG
2. enable nsSVGMaskFrame::BuildDisplayList
3. Use nsLayoutUtils::PaintFrame.

Review commit: https://reviewboard.mozilla.org/r/177278/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/177278/

Comment 18

[Jared Wein [:jaws] (please needinfo? me)]

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

Comment 19

[u459114]

not yet, it's a WIP patch only

Comment 20

[Jonathan Watt [:jwatt]]

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

Comment 21

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 22

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.