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

@@ -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({