Edge & IE not respecting overflow-y in angular animation

Question

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

*Begin Rant*...IE never be showing nobody Respect, doing what?, acting how?, doesn't make sense!, Microsoft this, Microsoft that, Face Palm... *End Rant* — Narm, May 17 '19 at 19:50
I'd love it, but tell that to our customers. Everything else is actually working well, just this animation looks bad. — Chris Barr, May 17 '19 at 20:06
Found a related Angular bug, and posted there as well: https://github.com/angular/angular/issues/29463 — Chris Barr, May 17 '19 at 20:09
IE 10 and up. I assume if it can be made to work in there it can work anywhere else — Chris Barr, May 20 '19 at 13:07

score 1 · Answer 1 · answered May 20 '19 at 20:27

This is a bit of a workaround, but it will at least make a similar looking animation in IE/Edge. It's similar, but not identical, and it doesn't have any overflow issues.

it turns out that this is an Angular issue. it attempts to translate the animation code to CSS @keyframes for browser that do not support WebAnimations and the overflow-y property doesn't seem to translate properly.

Since we know what isn't supported, we can detect support for the API and switch out which animation to use based on that. The line 'animate' in document.documentElement will tell us if WebAnimations are supported or not.

Here's the full code:

import { trigger, transition, style, animate, state, AnimationMetadata } from '@angular/animations';
import { defaultDuration, defaultEasing } from './animation-variables';

//Angular does not properly translate a WebAnimation with `overflow-y` into a CSS Animation, this it overflows it's container.
//So we use an entirely different animation for these browsers.  It will still overflow, but the added opacity transition makes it less obvious

const animForWebAnimations: AnimationMetadata[] = [
    state('*', style({
        height: '*',
    })),
    state('void', style({
        height: '0',
        'overflow-y': 'hidden',
    })),
    //Same transition duration/easing when entering or leaving
    transition('* => *', animate(`${defaultDuration}ms ${defaultEasing}`))
];

const animForCssAnimations: AnimationMetadata[] = [
    state('*', style({
        height: '*',
        'transform-origin': 'center 0',
        transform: 'scaleY(1)'
    })),
    state('void', style({
        height: '0px',
        'transform-origin': 'center 0',
        transform: 'scaleY(0)'
    })),
    transition('* => *', animate(`${defaultDuration}ms ${defaultEasing}`))
];

const expandCollapseAnimationMetadata = 'animate' in document.documentElement ? animForWebAnimations : animForCssAnimations;
export const expandCollapseAnimation = trigger('expandCollapse', expandCollapseAnimationMetadata);

For Chrome/Firefox and other "good" browsers the animation looks the same as above in my question, but now it looks like this in IE/Edge

This is not really what OP wanted. Yours is squashing the text - not revealing it. — Troels Wiberg Jensen, Jun 02 '20 at 20:18
Yep, I know but its as good as we can get in IE right now. It's a workaround since IE has the overflow issue, this is preferred to the overflow issue. Also, I am the OP, hah! — Chris Barr, Jun 21 '20 at 14:46
ha ha .... didn't notice that. If you animate the height of an element wrapping the content (with overflow: hidden on the wrapper) then you get the desired effect. Even in IE :) — Troels Wiberg Jensen, Jun 22 '20 at 20:21

score 0 · Answer 2 · answered Oct 21 '19 at 14:32

I've been facing the same problem and i found a pretty sweet way to solve it. Angular is applying a class when it's running the angular animation. So you can add your overflow hidden to that class as in this simple example:

.acrodion-content.ng-animating {
  oveflow:hidden;
}

<div class="accordion-item">
  <div class="accordion-item-header">One</div>
  <div class="accordion-content" [@expandCollapse] *ngIf="expanded">
    lorem ipsum dolor sit amet.
  </div>
</div>

Edge & IE not respecting overflow-y in angular animation

2 Answers2