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

Closed
wants to merge 3 commits into
from

Conversation

Projects
None yet
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

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
improve look of fx.html tests
With 2-column layout, now fits on iPhone screen
remove unnecessary defers from fx.html
animate() is not async anymore
@madrobby

This comment has been minimized.

Show comment
Hide comment
@madrobby

madrobby Sep 11, 2012

Owner

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

Owner

madrobby commented Sep 11, 2012

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

@mislav

This comment has been minimized.

Show comment
Hide comment
@mislav

mislav Sep 11, 2012

Collaborator

Merged as 2ed0123

Collaborator

mislav commented Sep 11, 2012

Merged as 2ed0123

@mislav mislav closed this Sep 11, 2012

@AliMD

This comment has been minimized.

Show comment
Hide comment
@AliMD

AliMD Sep 11, 2012

Contributor

Where defined that ? and why it work !?

Contributor

AliMD commented Sep 11, 2012

Where defined that ? and why it work !?

@mislav

This comment has been minimized.

Show comment
Hide comment
@mislav

mislav Sep 12, 2012

Collaborator

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

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