Two images that present the effect of backface & transform: translate3d

While developing a jQuery scrollable parallax site component (coming soon) with @pupunzi we found out that having CSS3 animations impacted dramatically performances on Firefox, but adding by hand instructions on CSS3 on backface and transform: translate3d (which normally you should not do) solved the problem. See this discussion: Considerations for CSS3 Transition Performance.

Look how Firefox 3D DOM model looks before and after applying the instructions below.

Before

No Transform3d Specified

After

Transform3d Specified

See how the various divs (following parts of the scroll path) are now ready to be displayed.

You can follow the author on Twitter here.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: