Animations not working on Firefox 53, error

I’m submitting a … (check one with “x”)

[ x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Trying to use the Angular 4 animations on Firefox returns an error. This behavior is not present on Chrome, Safari (MacOS)

Expected behavior

The same behavior that Chrome. I need that the animations works. Minimal reproduction of the problem with instructions

Please check this plnkr that i made for this: http://plnkr.co/edit/K2NxOn?p=preview

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

Mac OS Sierra, Windows 10, NPM, NodeJS

• Angular version: 4.0.1

• Browser: Chrome 56 | Firefox 53

Firefox 52, 53

• Language: [all | TypeScript X.X | ES6/7 | ES5] all
• Node (for AoT issues): node --version =
  6

[matsko]

It looks like the animation code in Angular needs to break up margin and padding into marginTop, marginLeft, marginRight, marginBottom and paddingLeft, paddingRight, paddingTop, paddingBottom.

[Lakston]

Problem still exists with:

FF: 64.0 (64-bit) @angular/animations: 7.2.0

I fixed it as suggested by explicitly declaring all my paddings (paddingLeft, paddingRight, paddingTop, paddingBottom) instead of using padding: 0