fix: remove transform to maintain fixed positioning in child elements (…

…#1006) * fix: remove transform to maintain fixed positioning in child elements * fix: add fix explanatory comment
telekom · Apr 27, 2022 · 2fea224 · 2fea224
1 parent 8724bfc
commit 2fea224
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/packages/components/src/utils/animate.ts b/packages/components/src/utils/animate.ts
@@ -61,13 +61,18 @@ export const KEYFRAMES = {
       offset: 0,
       ...keyframeDefaults,
       opacity: 0,
-      transform: 'translateY(-3rem)',
+      /**
+       * we are not using transform here to avoid breaking positioning for nested fixed elements (i.e. a flyout menu in an animated modal)
+       * see 'fixed' section @link https://developer.mozilla.org/en-US/docs/Web/CSS/position
+       */
+
+      top: '-3rem',
     },
     {
       offset: 1,
       ...keyframeDefaults,
       opacity: 1,
-      transform: 'translateY(0)',
+      top: 0,
     },
   ],
 };