From 7a354a0958dd31379c49c17850c76816a88673ff Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 29 Sep 2017 22:16:27 +0200 Subject: [PATCH] fix(tabs): blurry content in IE (#6954) Fixes the content of tabs being blurred on IE due to a `transform`. Fixes #6944. --- src/lib/tabs/tab-body.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/lib/tabs/tab-body.ts b/src/lib/tabs/tab-body.ts index 0d738582d7a..8999b60a83f 100644 --- a/src/lib/tabs/tab-body.ts +++ b/src/lib/tabs/tab-body.ts @@ -69,11 +69,9 @@ export type MatTabBodyOriginState = 'left' | 'right'; }, animations: [ trigger('translateTab', [ - state('void', style({transform: 'translate3d(0%, 0, 0)'})), + // Note: transitions to `none` instead of 0, because some browsers might blur the content. + state('center, void, left-origin-center, right-origin-center', style({transform: 'none'})), state('left', style({transform: 'translate3d(-100%, 0, 0)'})), - state('left-origin-center', style({transform: 'translate3d(0%, 0, 0)'})), - state('right-origin-center', style({transform: 'translate3d(0%, 0, 0)'})), - state('center', style({transform: 'translate3d(0%, 0, 0)'})), state('right', style({transform: 'translate3d(100%, 0, 0)'})), transition('* => left, * => right, left => center, right => center', animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')),