1163875 - SVG SMIL animation of opacity appears to be broken

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[Mike Hopkins]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:37.0) Gecko/20100101 Firefox/37.0
Build ID: 20150415140819

Steps to reproduce:

See http://codepen.io/guttentag/blog/smil-animate-opacity for an example (all elements in this person's CodePen should animate)

It appears that when using SVG SMIL to animate opacity of elements, Firefox animates the element inconsistently, and often randomly. Sometimes clicking in the window can force a frame to update, but it is not reliable.


Actual results:

Firefox either stops animating or only animates some items.


Expected results:

In the above linked example, all elements should animate (can compare with Chrome for example, which animates correctly).

Animating another property such as fillColor seems to be okay and Firefox renders as expecting. This seems to just be related to opacity?

Comment 1

[Robert Longson [:longsonr]]

begin values cannot start with a . i.e. you must write begin="0.9s" rather than begin=".9s"

Firefox works the same as Opera 12 and follows the SVG/SMIL specification. Chrome does not.

Either take this up with Chrome or with w3c (https://lists.w3.org/Archives/Public/www-svg/) as Firefox is correct per the appropriate specifications and Chrome is not.

Comment 2

[Robert Longson [:longsonr]]

If you look in the browser console (Web Developer->Browser Console), you'll see that the console is full of parse errors.

Comment 3

[Mike Hopkins]

Ah okay. That explains the issue with that person's demonstration. I'd noticed it in an SVG I've been working with, and from doing some cursory researched assumed the issue behaviour was similar. Apologies for that, but also thank you for showing where that person's example was problematic :)

I've put together what I believe to be a "reduced case" here. There are no errors in the console; Firefox seems to have some pretty difficult times with it. It could be related to it being in the <defs> part, not sure.

http://codepen.io/mikehdt/pen/mJVgEz - the example which Firefox struggles with.

Comment 4

[Robert Longson [:longsonr]]

Attachment: testcase as attachment

Comment 5

[Robert Longson [:longsonr]]

Attachment: opacity.txt

Comment 6

[Jonathan Watt [:jwatt]]

Comment on attachment 8604651 [details] [diff] [review]
opacity.txt

Review of attachment 8604651 [details] [diff] [review]:
-----------------------------------------------------------------

::: layout/base/RestyleManager.cpp
@@ +804,5 @@
>        }
> +      if (hint & nsChangeHint_InvalidateRenderingObservers ||
> +          ((hint & nsChangeHint_UpdateOpacityLayer) &&
> +          frame->IsFrameOfType(nsIFrame::eSVG) &&
> +          !(frame->GetStateBits() & NS_STATE_IS_OUTER_SVG))) {

Can you fix the indentation on these last two lines (add one more space) so that the grouping logic is clearer?

Comment 7

[Robert Longson [:longsonr]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=b10ee7e76da4

Comment 8

[Robert Longson [:longsonr]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/462894a3b004

Comment 9

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/462894a3b004