angular: 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)

image

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

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 10
  • Comments: 15 (6 by maintainers)

Most upvoted comments

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.

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

We discovered that Firefox 96 addresses this issue. So we can call this issue resolved. Thanks for reporting it!

I know it’s only been almost 4 years so I don’t want to be too pushy, but is this still on anyones TODO?

Well… then it is a bug my friend…