788677 - Multi-property CSS transition does not animate when position property is changed

Status: RESOLVED DUPLICATE of bug 625289

(Core :: Layout, defect)

Description

[Dan K]

Attachment: example of the issue

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:15.0) Gecko/20100101 Firefox/15.0
Build ID: 20120824154833

Steps to reproduce:

Changing an element's CSS transition-compatible property and the position property at the same time will prevent the transition from animating. This issue does not occur on

Example: http://jsfiddle.net/Ra2cC/ (also attached as "bug.html" to this report)

One element is assigned a transition property for "height" and "opacity":
-moz-transition: height 0.5s, opacity 0.5s;

This element is also assigned a "height" value of "0", a "opacity" value of "0", and a "position" property value of "absolute".

Using Javascript, if "height", "opacity", and "position" are changed to another value in the same block of code, the animation does not take place.

If a delay is present between changing "position" with the other values, then the animation does work.


Actual results:

The scene jumped immediately to the end state, skipping animation.


Expected results:

Animation should have taken place as specified by the CSS definitions.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Almost certainly a duplicate of bug 625289.

Comment 2

[Dan K]

This issue is confirmed to occur on the following browsers/systems:
Firefox 14.0.1 (tested on Fedora 17 x86)
Firefox 15.0 (tested on Windows 7 x64)

This issue does not occur for the following browsers/systems:
Chrome 21.0.1180.83 m (tested on Windows 7 x64)
Chrome 21.0.1180.89 m (tested on Windows 7 x64)
Chrome 21.0.1180.89 (tested on Fedora 17 x86)
Safari 6.0 (7536.25) (tested on Mac OS X 10.7.4)

Comment 3

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

Fixed in Firefox 34 by