Skip to content

another stab at fixing animate() for elements just added to DOM #586

Closed
wants to merge 3 commits into from

3 participants

@mislav
Collaborator
mislav commented Sep 11, 2012

@madrobby, I want you to take a look at this.

Activating CSS transitions for an element just added to the DOM won't work in either Webkit or Mozilla. To work around this, we used to defer setting CSS properties with setTimeout (see 272513b).

This solved the problem for Webkit, but not for latest versions of Firefox. Mozilla seems to need at least 15ms timeout, and even this value varies.

A better solution for both engines is to trigger "layout". This is done here by reading clientLeft from an element.

mislav added some commits Sep 11, 2012
@mislav mislav fix animate() for elements just added to DOM
Activating CSS transitions for an element just added to the DOM won't
work in either Webkit or Mozilla. To work around this, we used to defer
setting CSS properties with setTimeout (see 272513b).

This solved the problem for Webkit, but not for latest versions of
Firefox. Mozilla seems to need at least 15ms timeout, and even this
value varies.

A better solution for both engines is to trigger "layout". This is done
here by reading `clientLeft` from an element. There are other
properties and methods that trigger layout; see
http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
3d92f20
@mislav mislav improve look of fx.html tests
With 2-column layout, now fits on iPhone screen
e37098c
@mislav mislav remove unnecessary defers from fx.html
animate() is not async anymore
16c7e7b
@madrobby
Owner

As discussed in zepto-core, this looks like a better solution.

@mislav
Collaborator
mislav commented Sep 11, 2012

Merged as 2ed0123

@mislav mislav closed this Sep 11, 2012
@AliMD
AliMD commented Sep 11, 2012

Where defined that ? and why it work !?

@mislav
Collaborator
mislav commented Sep 12, 2012

that is a local variable. if you search for it in your text editor, you'll see where it's defined. It stores the original reference to this inside nested functions that execute in different scopes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.