From a708013ee5c94a42049d43aad96487f6b2e2a343 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Thu, 25 May 2017 22:28:40 +0200 Subject: [PATCH] fix(dialog): blurry content and slow animation in IE Fixes the dialog content being blurry and the animation being really janky in IE11. --- src/lib/dialog/dialog-container.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/lib/dialog/dialog-container.ts b/src/lib/dialog/dialog-container.ts index 279de03cb68a..0274c58379b8 100644 --- a/src/lib/dialog/dialog-container.ts +++ b/src/lib/dialog/dialog-container.ts @@ -45,8 +45,12 @@ export function throwMdDialogContentAlreadyAttachedError() { encapsulation: ViewEncapsulation.None, animations: [ trigger('slideDialog', [ + // Note: The `enter` animation doesn't transition to something like `translate3d(0, 0, 0) + // scale(1)`, because for some reason specifying the transform explicitly, causes IE both + // to blur the dialog content and decimate the animation performance. Leaving it blank + // solves both issues. + state('enter', style({ opacity: 1 })), state('void', style({ transform: 'translate3d(0, 25%, 0) scale(0.9)', opacity: 0 })), - state('enter', style({ transform: 'translate3d(0, 0, 0) scale(1)', opacity: 1 })), state('exit', style({ transform: 'translate3d(0, 25%, 0)', opacity: 0 })), transition('* => *', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')), ])