by Sarah Hunt
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:
It has now been changed to only support the individual axis.
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.