[Animations] toggle state with display: 'none' doesn't work on Safari

[Michsior14]

🐞 bug report

Affected Package

The issue is caused by package @angular/animations

Is this a regression?

Yes, the previous version in which this bug was not present was: 7.2.7

Description

When using animation state with `display: 'none'` the animation does not fire/finish on Safari. It seems to be related to #28911 .

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-v6-animations-txqyvd
After click on "fade" button, two texts should be shown (without actual "fade in" animation, they should just appear), what works perfectly fine in Chrome, Firefox and IE/Edge on Linux/Windows.

🌍 Your Environment

Angular Version:

Angular: 7.2.8

Anything else relevant?

Safari on macOS and iPad

[vitorplopes]

Still facing this issue at 7.2.14. 7.2.7 is the last version working, as stated above.

[eyeswideopen]

Facing the same Problem!
Any workaround?
I'm alrady using the safari polyfill via
import 'web-animations-js'; without success

[simeyla]

@Michsior14 I'm facing the same problem, where my animated container contains a mat-progress-bar so I don't want to leave it animating the whole time my application is running!

The problem is I don't think your example really works very well on Chrome either.

I changed your stackblitz to use longer delays (of 2 or 4 seconds). When you click the "Fade" button to fade in you don't actually see anything fading in - it just jumps to being visible after 2 seconds or 4 seconds.

So while there does indeed seem to be a regression in Safari - because it just flat doesn't work - there's a better way to do the display: none thing like this:

The difference being the 'block' state is set on the transition. This works in Safari.

 trigger('activeAnimation',
        [
            state('inactive', style({ 'height': '0px', 'opacity': '0', 'display': 'none' })),
            state('active', style({ 'height': '30px', 'opacity': '1' })),

            transition('inactive => active', [
                style({ 'display': 'block' }),
                animate('5000ms ease-in')
            ]),

            transition('active => inactive', [
                animate('5000ms ease-in')
            ])
        ]),

Stackblitz

However I can't figure out why the animation of the mat-progress bar is completely messed up - but the panel animates just fine.

[Michsior14]

@simeyla The example was prepared very quickly from already existing stackblitz to show that nothing happens in the Safari. I know that it is actually only fading out and it's intended.

[james-criscuolo]

This is right off material's documentation: https://stackblitz.com/angular/drlaxdpogep?file=app%2Ftable-expandable-rows-example.ts

Here's the page its on: https://material.angular.io/components/table/examples (look for expandable)

It works on the page, then you go to the stackblitz and you get broken behavior, even in Chrome.

[dawda92]

Any update on this part? I'm facing the same problem.

[AmebaBrain]

@james-criscuolo, @dawda92
the diff is presence of display: 'none' in Stackblitz example and it's absence in Material's example
Angular 8 no longer support display property in animations. As I understood.

Also, to get expanded row hided on default state, it's required to add overflow: hidden as in Material's example

.example-element-detail {
  overflow: hidden;
  display: flex;
}

This works to me (take a note for an additional void state)

    trigger('detailExpand', [
      state('collapsed, void', style({ height: '0px', minHeight: '0' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> void, expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
    ])

[gizmodus]

I have the same problem in IE11 in Angular 8.1.0: The animation seems to get stuck in a "animation-play-state: running;" state.
Replacing "display: none;" with "height: 0;" seems to fix the problem.

[umaqs]

@gizmodus @AmebaBrain
I had the same issue with version 8.1.3
Animations containing display:block <=> display:none were not working on Safari Mac and iOS.

Solved by display property and using height:'*' <=> height:0 in animation states.

I would never get back the 2 weeks that I spent solving this but thank you very much, everyone

Working code:

trigger('displayAnim', [
        state('true', style({
            'height': '*', 'opacity': '1'
        })),
        state('false', style({
            'height': '0', 'opacity': '0'
        })),
        transition('true => false', [group([
            animate('200ms ease-in-out', style({
                'opacity': '0'
            })),
            animate('200ms ease-in-out', style({
                'height': '0'
            })),
            // animate('200ms ease-in-out', style({
            //     'display': 'none'
            // }))
        ]
        )]),
        transition('false => true', [group([
            // animate('200ms ease-in-out', style({
            //     'display': 'block'
            // })),
            animate('200ms ease-in-out', style({
                'height': '*'
            })),
            animate('200ms ease-in-out', style({
                'opacity': '1'
            }))
        ]
        )])
    ]),

[JWTappert]

@gizmodus this fixed it for me too!

[AlexDanault]

I'm trying to get @gionkunz 's solution to work for my route transitions, but since I'm not transitioning between only two states (true/false) and instead transitioning between all routes (using routerOutlet.activatedRoute) I'm not sure how to adapt this solution. I tried all flavors of '* => *' I could think of, but I'm always losing the fade out part of the animation.

Thanks !

[AaronLavers]

This issue is persisting in Angular 8 / animations 8.2.9 in Safari.

Animation-play-state seems to get stuck before finishing, resulting in opacity: 0, or 3D transform states which hide elements. A major issue is with angular material mat-sidenav which doesn't become visible until you refresh the browser.

Interestingly the animations always fire and complete correctly after a browser refresh, but consistently fail on initial loading

[greenspeed]

I have this issue in Chrome/safari in ios 12.1.4 with Angular 8.1. It works on Safari if the experimental feature for web animation is turned on.

[tluckett77]

After trying several of the solution suggested here. Setting the height affected my transitions in a way that I didn't want and display: block and display: none was required for my UI. I found that this one worked best for my case.

// ...component.ts
@Component({  // ...
animations: [
   trigger('backdropAnimation', [
     state('false', style({
       'opacity': '0',
     })),
     state('true', style({
       'opacity': '1',
     })),
     transition(
       'false => true',
       animate('500ms ease-out')
     ),
     transition(
       'true => false',
       animate('400ms ease-in')
     ),
   ]),

// ...

 public isAnimationOptionsStateOpen = false;
 public backdropDisplay: 'block'|'none' = 'none';

// ...

 public backdropStart(): void {
   this.backdropDisplay = 'block';
 }

 public backDropDone(): void {
   this.backdropDisplay = (this.isAnimationOptionsStateOpen ? 'block' : 'none');
 }

// ...component.html
<div
      (@backdropAnimation.start)="backdropStart()"
      (@backdropAnimation.done)="backDropDone()"
      [@backdropAnimation]="isAnimationOptionsStateOpen"
      [ngClass]="['backdrop']"
      [ngStyle]="{'display': backdropDisplay}">
</div>

[pedroct92]

@simeyla approach worked for me. The animation now is working better on chrome and it is actually working on IE11 and edge. However, that would be nice to have a definitive fix on this issue.

Thanks.

[Mkhassani]

I solved my problem by this, maybe be helfull for others that have the same problem with angular 7

animations: [ trigger('openClose', [ // ... state('open', style({ 'height': '20px', 'width':'120px', 'opacity': '1' })), state('closed', style({ 'height': '0','width':'0', 'opacity': '0' })), transition('open => closed', [ animate('1s') ]), transition('closed => open', [ animate('0.5s') ]), ]), ],

isOpen = true; toggle() { this.isOpen = !this.isOpen; }

I am using it for FadeIn and FadeOut the input

<mat-icon (click)="toggle()" style="cursor: pointer;" class="example-icon" aria-hidden="false" aria-label="Example delete icon">add_circle</mat-icon> <input [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container" placeholder="Sök avnändare"/>

https://stackblitz.com/edit/angular-1cjddv

[NastyaSmirnova]

Why not to try visibility property?

trigger('showHide', [
    state('show', style({ opacity: 1, visibility: 'visible' })),
    state('hide', style({ opacity: 0, visibility: 'hidden' })),
    transition('show <=> hide', [animate('.15s ease-in')])
]);

[BEG-Enterprise-Group]

I had the same problem but working with queries I just adjust the time of the stagger it was before 600ms and the animation 600ms also. I adjusted to 200ms and work excellent in all browsers

export const itemsMenu = trigger('itemsMenu',[ transition('* <=> *',[ query('a', style({opacity: 0, transform: 'translateX(100%)'})), query('a',stagger('200ms',[ animate('800ms ease-in', keyframes([ style({opacity: 0, transform: 'translateX(100%)', offset: 0}), style({opacity: 0.5, transform: 'translateX(50%)', offset: 0.5}), style({opacity: 1, transform: 'translateX(0)', offset: 1}) ]) ) ])), ]), ]);

[pranav-js]

@james-criscuolo, @dawda92
the diff is presence of display: 'none' in Stackblitz example and it's absence in Material's example
Angular 8 no longer support display property in animations. As I understood.

Also, to get expanded row hided on default state, it's required to add overflow: hidden as in Material's example

.example-element-detail {
  overflow: hidden;
  display: flex;
}

This works to me (take a note for an additional void state)

    trigger('detailExpand', [
      state('collapsed, void', style({ height: '0px', minHeight: '0' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> void, expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
    ])

you are my man ❤️ . worked flawless.. i was using same animation lol

[jessicajaniuk]

I'm going to close this since there is a good solution here.

[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.}