From 40500029579ae91047732abe872347f1a7f168a8 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 22 Aug 2018 16:31:16 +0200 Subject: [PATCH] fix(sidenav): content jumping in rtl and blurry text on IE (#12726) * Fixes the content of the sidenav jumping around in RTL if it has active animations. * Fixes text inside the sidenav being blurry on IE and Edge. Relates to #10026. --- src/lib/sidenav/drawer-animations.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/lib/sidenav/drawer-animations.ts b/src/lib/sidenav/drawer-animations.ts index e280e63b111c..d88c7c085a01 100644 --- a/src/lib/sidenav/drawer-animations.ts +++ b/src/lib/sidenav/drawer-animations.ts @@ -20,8 +20,12 @@ export const matDrawerAnimations: { } = { /** Animation that slides a drawer in and out. */ transformDrawer: trigger('transform', [ + // We remove the `transform` here completely, rather than setting it to zero, because: + // 1. Having a transform can cause elements with ripples or an animated + // transform to shift around in Chrome with an RTL layout (see #10023). + // 2. 3d transforms causes text to appear blurry on IE and Edge. state('open, open-instant', style({ - 'transform': 'translate3d(0, 0, 0)', + 'transform': 'none', 'visibility': 'visible', })), state('void', style({