Summary: | CSS transitions on opacity fail when used with visibility in certain circumstances | ||||||
---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Shawn Lauriat <shawn> | ||||
Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||
Status: | RESOLVED WORKSFORME | ||||||
Severity: | Normal | CC: | neelima.web | ||||
Priority: | P3 | ||||||
Version: | 528+ (Nightly build) | ||||||
Hardware: | Mac | ||||||
OS: | OS X 10.5 | ||||||
Attachments: |
|
Description
Shawn Lauriat
2009-01-25 03:29:55 PST
Created attachment 27013 [details]
HTML file with three example functions, showing inconsistency in behavior
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. (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. 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. 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. |