fix: in cases where the drawer type is set to be permanent, do not ap…

…ply any transformations

This PR removes `transform` style from container and drawer views when the drawer type is set to be `permanent`. It does so to prevent cases where the `transform` CSS rule being present in a `web` context may cause other elements to no longer work correctly - see [this Chromium bug](https://bugs.chromium.org/p/chromium/issues/detail?id=20574) regarding `position:fixed`.

I tried to stick to what I think to be the *intent* here, in that if the drawer type is set to be permanent, then no animation of the scene container or the drawer is ever intended in the future, and therefore, not having any `transform` present is desirable.

packages/drawer/src/views/legacy/Drawer.tsx

@@ -498,14 +498,10 @@ export default class DrawerView extends React.Component<DrawerProps> {
     const isRight = drawerPosition === 'right';
 
     const contentTranslateX =
-      drawerType === 'front' || drawerType === 'permanent'
-        ? ANIMATED_ZERO
-        : this.translateX;
+      drawerType === 'front' ? ANIMATED_ZERO : this.translateX;
 
     const drawerTranslateX =
-      drawerType === 'permanent'
-        ? ANIMATED_ZERO
-        : drawerType === 'back'
+      drawerType === 'back'
         ? I18nManager.isRTL
           ? multiply(
               sub(this.containerWidth, this.drawerWidth),
@@ -557,7 +553,9 @@ export default class DrawerView extends React.Component<DrawerProps> {
             <Animated.View
               style={[
                 styles.content,
-                { transform: [{ translateX: contentTranslateX }] },
+                drawerType !== 'permanent'
+                  ? { transform: [{ translateX: contentTranslateX }] }
+                  : undefined,
               ]}
             >
               <View
@@ -607,10 +605,12 @@ export default class DrawerView extends React.Component<DrawerProps> {
               onLayout={this.handleDrawerLayout}
               style={[
                 styles.container,
-                {
-                  transform: [{ translateX: drawerTranslateX }],
-                  opacity: this.drawerOpacity,
-                },
+                drawerType === 'permanent'
+                  ? { opacity: 1 }
+                  : {
+                      transform: [{ translateX: drawerTranslateX }],
+                      opacity: this.drawerOpacity,
+                    },
                 drawerType === 'permanent'
                   ? // Without this, the `left`/`right` values don't get reset
                     isRight

packages/drawer/src/views/modern/Drawer.tsx

@@ -260,24 +260,29 @@ export default function Drawer({
   });
 
   const drawerAnimatedStyle = useAnimatedStyle(() => {
+    if (drawerType === 'permanent') {
+      return {};
+    }
+
     return {
       transform: [
         {
-          translateX:
-            drawerType === 'permanent' || drawerType === 'back'
-              ? 0
-              : translateX.value,
+          translateX: drawerType === 'back' ? 0 : translateX.value,
         },
       ],
     };
   });
 
   const contentAnimatedStyle = useAnimatedStyle(() => {
+    if (drawerType === 'permanent') {
+      return {};
+    }
+
     return {
       transform: [
         {
           translateX:
-            drawerType === 'permanent' || drawerType === 'front'
+            drawerType === 'front'
               ? 0
               : drawerPosition === 'left'
               ? drawerWidth + translateX.value