Bug 40811 – -webkit-transition for opacity doesn't work properly on first pass when element display 'none' on page load

• Status: RESOLVED
• Resolution: INVALID
• Component: Layout and Rendering

[Brent Fulgham]

The attached test case attempts to animate the reveal of some hidden page content (display type set to none) using a fade-in transition.

Expected behavior would be for the hidden content to fade-in on the first pass:
1. Element display type changed from 'none' to '' (opacity is 0 initially).  If this element was part of a page with more content, I would expect downstream elements to shift down by the size of the hidden element (though the region will show blank due to zero opacity.)
2. Element will transition (using -webkit-transition) from opacity 0 to opacity 1.
3. Animation completes
4. Repeating the "Show/hide" button causes the element to fade out.
5. Repeating the "Show/hide" button causes the element to fade in.

Actual behavior on Windows Safari 4.0 - 5.0, Mac Safari 5.0 (and probably prior), and WinCairo port is as follows:
1. Element display type changed from 'none' to ''.  Although opacity is 0 initially, the element pops into full existence with no animation.
2. If the "Show/hide" button is pressed, element fades out as expected.
3. If the "Show/hide" button is pressed again, element fades in as expected.

[Brent Fulgham]

Created attachment 59124 [details]
Test case for transition effect

The attached test case shows the unexpected behavior when transitions are used in conjunction with a switch from "display:none" to "display:"

[Simon Fraser (smfr)]

Transitions only work if the initial state is actually rendered first. So this is not expected to work at present. Whether it should long-term is another question.

[Brent Fulgham]

Created attachment 59146 [details]
Corrected transition test -- now works properly.

Revised case, showing proper behavior.

[Brent Fulgham]

As Simon pointed out, the feature is working as expected.
1.  In this case, the initially hidden element should have opacity set to 0.
2.  In the general case, the browser will factor out unnecessary transforms.  In this case, shifting from hidden to displayed + opacity change is compressed to just display and opacity = 1.  To correct, code like the following is needed:

window.setTimeout(function () {
                  elem.style.opacity = "1";
               }, 0);

[Brent Fulgham]

Created attachment 59147 [details]
Corrected transition test -- now works properly.

Better final example, showing use of "setTimeout"