IE11 - IgxDialog jumps!

[luiscla27]

Description

IgxDialog appears at the bottom screen and then "jumps" to the center

• igniteui-angular version: 8.1.0 and 7.3.3
• browser: IE11

Steps to reproduce

1. Open your demo page from IE11
2. https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog.html
3. Click the "Show dialog" of the "Dialog demo sample"

Result

The dialog will show at the bottom of the IFRAME and then it'll move to the center of it.

Expected result

Either one of the following would be ok.

1. Show the dialog at the center of the screen from the very begining.
2. Fix the "fadding" animation so the movement doesn't look like a "jump"

If you have a workaround to just "disable" the animation that'll be ok for me :)

Attachments

[luiscla27]

This is the current workaround am using, wich i think is really really ugly, i'll greatly appreciate a better approach:

/* IE10 & 11 Only - Small resolution*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .igx-dialog__window {
    position: fixed!important;
    top: 0px!important;
    overflow: hidden!important;
    margin: 0;
    left: 0;
    right: 0;
  }
}
/* IE10 & 11 Only - Medium resolution */
@media screen and (min-width: 40em) and (-ms-high-contrast: active) {
  .igx-dialog__window {
    top: 25%!important;
    margin: auto 32%;
  }
}

[zdrawku]

Hey @luiscla27, we should expose animationSettings @input for the Dialog as we did for the Banner component, I confirm this is behavior which cannot be configured by the end-user right now, and I am adding status "In Review"

As for the animations, these are the default animations that we've created for the Dialog component: openAnimation is slideInBottom and closeAnimation is slideOutTop.