Issue with animations not working correctly on IE/Edge

[andreabergia]

🐞 bug report

Affected Package

The issue is caused by package @angular/animations

Is this a regression?

Yes, we have tested that this used to work in Angular 7.2.7 and does not anymore in Angular 7.2.8+ (tested in 7.2.8, 7.2.9 and 7.2.10)

Description

We want to create a box with a title bar that, on click, will close and hide its content. We also tried to animate its opening and closing, but with angular 7.2.8+ this doesn't work correctly:

• in Chrome and Firefox only the "opening" animation works; the closing doesn't (minor)
• furthermore, in IE and Edge, once the box has been closed, it cannot be reopened again (blocking bug since our customer uses IE).

From the changelog, it seems to be related to #28911

🔬 Minimal Reproduction

We have created a minimal repo with the angular CLI at https://github.com/andreabergia/angular-close-animation-bug

Simply starting the application will show the test component; clicking on its bar should open and collapse the box, but it doesn't work correctly as described above.

The interesting source code is in the files collapsible-box.component.ts and collapsible-box.component.html

🌍 Your Environment

Angular Version:

The bug can be reproduced with Angular 7.2.8, 7.2.9 and 7.2.10. It is not present in 7.2.7.

Angular CLI: 7.3.6
Node: 10.9.0
OS: win32 x64
Angular: 7.2.10
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.6
@angular-devkit/build-angular     0.13.6
@angular-devkit/build-optimizer   0.13.6
@angular-devkit/build-webpack     0.13.6
@angular-devkit/core              7.3.6
@angular-devkit/schematics        7.3.6
@angular/cli                      7.3.6
@ngtools/webpack                  7.3.6
@schematics/angular               7.3.6
@schematics/update                0.13.6
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

[pixelit]

The same problem occurs in our app. Animations are not triggered in IE and Edge (slide open animation).
Took some time to find out it was the upate to 7.2.10. Going back to 7.2.7 resolved the issue.
Thanks @andreabergia for the bug report, since this put me on the right track.

[ganqqwerty]

same problem with ng-bootstrap collapse animation if we use display:none to display:block transition

[yogeshgadge]

I am seeing that 'display': 'none' remains in IE/Edge and I see the animation-play-state: running

[ChrisMBarr]

I asked this question on StackOverflow but I'll post the details here for completion.

---

I've made the following angular animation for my app so be able to vertically expand/collapse elements. It works, but it seems the Edge and IE do not apply the overflow-y during the animation which makes it look all wonky.

import { trigger, transition, style, animate, state } from '@angular/animations';

export const expandCollapseAnimation = trigger('expandCollapse', [
    state('*', style({
        height: '*',
    })),
    state('void', style({
        height: '0',
        'overflow-y': 'hidden',
    })),
    //Same transition duration/easing when entering or leaving
    transition('* => *', animate(`300ms cubic-bezier(0.4, 0, 0.2, 1)`))
]);

---

Here's what it looks like in Chrome, where overflow-y is properly applied

And here's what it looks like in Edge and IE where the content "pops" in & out instead.

---

What can I do to fix this?

And yes, I did install and add web-animations-js to my Polyfills file, and this did not change anything

[StefanKern]

Problem still exists with "@angular/animations": "7.2.15"!

Reverting back to "@angular/animations": "7.2.7" fixed it for me

[Riccardo-Andreatta]

The same problem is also present in Safari (...another awful browser 👎 😄).

[imnickvaughn]

Same issue in Angular 8. This is odd, no status on this as of 3/4 of a year? Is anyone working on this?

This is what it looks like in Edge for me:

And in Chrome:

    "dependencies": {
        "@angular/animations": "~8.2.13",
        "@angular/cdk": "~8.2.3",
        "@angular/common": "~8.2.13",
        "@angular/compiler": "~8.2.13",
        "@angular/core": "~8.2.13",
        "@angular/forms": "~8.2.13",
        "@angular/material": "^8.2.3",
        "@angular/platform-browser": "~8.2.13",
        "@angular/platform-browser-dynamic": "~8.2.13",
        "@angular/router": "~8.2.13",
        "core-js": "^2.5.4",
        "devextreme": "19.2.3",
        "devextreme-angular": "19.2.3",
        "devextreme-schematics": "^1.0.11",
        "geode-security-search": "0.0.1",
        "hammerjs": "^2.0.8",
        "rxjs": "~6.5.3",
        "tslib": "^1.9.0",
        "web-animations-js": "^2.3.2",
        "zone.js": "~0.9.1"

[vajnorcan]

the same problem here. I've noticed something though, that IE EDGE doesn't like the void parameter in the animation state. If you leave the 'void' it works (without the animations though).

If you use void, IE EDGE keeps stacking up the elements that are supposed to be shown (at image below there should be only one element added).

[daniel-sc]

Another workaround that solved a similar problem for me is to add the final styles additionally after the animation:

      transition(`* => MY_STATE`, [
        animate(`100ms`, keyframes([ // keyframes necessary for IE11/Edge
          style({width: '100px'})
        ])),
        style({width: '100px'}) // final styles necessary for IE11/Edge
      ]),

[jessicajaniuk]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular version.

If the problem still exists in your application, please open a new issue and follow the instructions in the issue template.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}