Bug 86316

Summary: zero timeout is needed to use webkit transition
Product: WebKit Reporter: Andrew Aladjev <aladjev.andrew>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED WONTFIX    
Severity: Major CC: aladjev.andrew, dino, simon.fraser
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
URL: http://jsfiddle.net/mL7RU/6/

Andrew Aladjev
Reported 2012-05-13 04:31:43 PDT
after applying class with webkit transition styles we should use zero timeout to use it (facepalm)
Attachments
Dean Jackson
Comment 1 2012-05-14 15:30:53 PDT
The issue here is that you are trying to run a transition at the same time you are moving from display: none to display: block. The way the style system works is that even though you have left: 0 when you're display: none, the style isn't evaluated until it needs to render it (which is done in the same execution cycle as you set left:200px). Hence, nothing happens. However, when you split those two operations it works. First you set display to be block. We calculate the style of left:0. Then after a 0 timeout you set left to 200px and we transition. Unfortunately this is the way things work. There is a spec bug open at W3C about transitioning around display: none. We'll follow what gets resolved there.
Note You need to log in before you can comment on or make changes to this bug.