by sahunt

Created

July 25, 2012

Firefox 14 was released out of beta last week, and with it came a surprise to our users – Edge animations stopped running in Firefox! Our team has been working diligently to provide a fix, which we released today as Adobe Edge preview 6.1 – more on that below. I also wanted to take this opportunity to explain what caused the issue.

CSS3 is still officially in a draft state. This is why browser prefixes (-moz, -o, -webkit, -ms) have become rampant in web development, and it’s really up to the browsers to decide how they want to implement and render the spec. The challenge for Edge is to try to stay ahead of the game and adapt quickly when things change in a major release.

 

What went wrong?

With the release of Firefox 14 came a change in the transform spec. Previously the CSS transform spec outlined here had the following syntax for specifying skew:

-moz-transform: skew(30deg,20deg);

It has now been changed to only support the individual axis.

transform: scaleX(sx);
transform: scaleY(sy);

More information on the Firefox animation spec can be found here.

The problem was that just about all Edge animations utilize the transform property, and even if your composition didn’t modify the skew property, the animation would drop the whole transform declaration since it is part of the “transform” CSS property.

How do I fix it?

Our team has devised a remedy for the problem, and it is available today as Adobe Edge preview 6.1.  You can download it from Adobe Labs or via the Creative Cloud. After you install it, all you’ll have to do is resave your project(s) and it will work in Firefox. Alternatively, you can simply swap out the runtime files without having to reload the composition in the app.

We live in a wonderful time where the web is evolving to give us new capabilities, though sometimes that involves some growing pains. Thank you everyone for your patience.

Download Edge 6.1 now.

 

COMMENTS

  • By Tony Uythoven - 2:18 PM on July 27, 2012  

    I downloaded Preview 6.1, but it still doesn’t work with Firefox 14.0.1.

    Tony

    • By sahunt - 7:34 AM on July 30, 2012  

      Hey Tony, if you’re having problems try asking on our Labs forums here. Thanks!

  • By Tim - 3:37 PM on July 26, 2012  

    What is meant by “swap out the runtime files”? I’m not a developer, I just had a website developed for me that used Edge, and now is broken. I have downloaded and installed Edge 6.1. What files do I need to deploy to my web server to fix the issue?

    • By sahunt - 7:35 AM on July 30, 2012  

      Hey Tim, it means you can either just switch the .js files that are in the “edge_includes” folder. You can also just reload your composition and resave which will do the same thing for you.

  • By Chris - 12:11 PM on July 26, 2012  

    Awesome. Thank you!