Bug 23528 – CSS transitions on opacity fail when used with visibility in certain circumstances

• Component: CSS
• Status: RESOLVED WORKSFORME

[Shawn Lauriat]

I'll attach the test case momentarily, which will hopefully explain things a bit more. I have an element in the page with visibility of hidden. A function then runs through the following steps:

1. take the element
2. make it visible
3. yet transparent
4. then set the transition
5. and then have it fade from opacity of 0 to 1 over one second

Instead, it appears instantly.

The test case file includes of couple of other functions, similarly written, in which the element fades in as desired. In one instance, the element simply starts off with the opacity preset to 0. In the other, it just breaks up the function into two parts by setting the WebkitTransition and destination opacity from within an anonymous function called from a setTimeout call with a delay of 0.

[Shawn Lauriat]

Created attachment 27013 [details]
HTML file with three example functions, showing inconsistency in behavior

[Neelima]

I have done some analysis on this bug.My observations are:
Its working fine in safari browser ,but not working in IE.As the opacity is new property introduced in CSS3.Neither IE 6 nor 7 support the CSS 3 opacity property. Instead, IE supports a Microsoft-only property "alpha filter". So, to get transparency in IE, opacity should be multiplied by 100 and an alpha filter should be added  to the style .
e.g., filter:Alpha(opacity 1to 100) property is to be used to get the changes refelected in IE.

[Shawn Lauriat]

(In reply to comment #2)
> I have done some analysis on this bug.My observations are:
> Its working fine in safari browser ,but not working in IE.As the opacity is new
> property introduced in CSS3.Neither IE 6 nor 7 support the CSS 3 opacity
> property. Instead, IE supports a Microsoft-only property "alpha filter". So, to
> get transparency in IE, opacity should be multiplied by 100 and an alpha filter
> should be added  to the style .
> e.g., filter:Alpha(opacity 1to 100) property is to be used to get the changes
> refelected in IE.
> 

I just updated WebKit to the latest nightly (r41071) and it still shows this incorrect behavior. Also, very confused as to what IE has to do with anything.

[Simon Fraser (smfr)]

Style changes from JS are batched, so this:
	theOne.style.visibility = "visible";
	theOne.style.opacity = 0;
	theOne.style.WebkitTransition = "all 1s ease-in-out";
	theOne.style.opacity = 1;

is really the same as:

	theOne.style.visibility = "visible";
	theOne.style.WebkitTransition = "all 1s ease-in-out";
	theOne.style.opacity = 1;

and the ordering doesn't make a difference. As you found, you have to use setTimeout() to avoid this batching.

So all this behavior is as expected.

[Shawn Lauriat]

Given the implementation, I can see why this makes sense. I suggest adding some note of description for this behavior to the draft of the spec in order to avoid this sort of confusion both with JavaScript developers and when other browsers begin to implement CSS Transitions.