956066 - Animation happens twice when we also have a transition and a font-face load

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect, P4)

Description

[kud]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:28.0) Gecko/20100101 Firefox/28.0 (Beta/Release)
Build ID: 20140102004005

Steps to reproduce:

Gone there http://kud.io/


Actual results:

Double animation on "kud" circle


Expected results:

Just one animation. No problem with other browsers (like chrome).

Comment 1

[Bogdan Maris, Desktop Test Engineering]

Reproduced on latest Aurora 28.0a2 and latest Nightly 29.0a1 using Mac OS X 10.9, Ubuntu 13.04 x32 and Windows 7 x32.

Comment 2

[Boris Zbarsky [:bzbarsky]]

Double animation in what sense?  I don't see any animation at all when I just load the page; I certainly don't see any "double animation"...  What are the actual steps to reproduce here?

Comment 3

[kud]

Sometimes, you have to refresh the webpage to see the correct animation.

The "_kud" bubble comes from top to the middle. Works perfectly well on other browsers.

Comment 4

[kud]

On firefox, either the animation doesn't come, either the animation comes twice (double top-to-middle).

Comment 5

[Boris Zbarsky [:bzbarsky]]

Oh, I see, my window has to be > 1024px wide or the page won't try to do the animation.

The issue here is that the <a> has both an animation which animates the "transform" property _and_ a transition on all properties.

And something about the font-face load triggers a restyle which tickles the transition, or something....

Comment 6

[Boris Zbarsky [:bzbarsky]]

Attachment: Minimal-ish testcase

Comment 7

[kud]

Yeah, small screens don't have the animation ;) Sorry, I should have explained it.

Yes, you perfectly rewrited the code, thank you Boris!

Comment 8

[Boris Zbarsky [:bzbarsky]]

I have a 1920x1200 screen, fwiw, but my browser windows are tiled two across.

Comment 9

[Boris Zbarsky [:bzbarsky]]

David, what's the transition code doing here?

Comment 10

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

This code needs to be rewritten in the pretty near future (bug 960465), so I'm inclined not to debug this in the expectation that it will be fixed by that rewrite.

Comment 11

[kud]

As it will be fixed by https://bugzilla.mozilla.org/show_bug.cgi?id=960465 as you said, should we close the bug?

Comment 12

[Boris Zbarsky [:bzbarsky]]

> As it will be fixed by https://bugzilla.mozilla.org/show_bug.cgi?id=960465 as you said,

It will _probably_ be fixed.  It might not be.  So once that bug is fixed, we'll need to retest this one to see whether it's fixed or not.

Comment 13

[kud]

Okay thanks :)

Comment 14

[Alex]

Attachment: test case with removing/appending animated element

Comment 15

[Alex]

The bug still exists and occurs when element has both transition and animation properties applied to the same CSS property. Interesting thing: bug occurs only on page load, if you remove element from page and append it back - everything works fine.

Comment 16

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Fixed by bug 960465 (or, very unlikely, something else that landed the same day).