Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wants to merge 3 commits into from

Conversation

@mislav
Copy link
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 3 commits Sep 11, 2012
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
With 2-column layout, now fits on iPhone screen
animate() is not async anymore
@madrobby

This comment has been minimized.

Copy link
Owner

madrobby commented Sep 11, 2012

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

@mislav

This comment has been minimized.

Copy link
Collaborator Author

mislav commented Sep 11, 2012

Merged as 2ed0123

@mislav mislav closed this Sep 11, 2012
@AliMD

This comment has been minimized.

Copy link
Contributor

AliMD commented Sep 11, 2012

Where defined that ? and why it work !?

@mislav

This comment has been minimized.

Copy link
Collaborator Author

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
Projects
None yet
3 participants
You can’t perform that action at this time.