From 631688396710c4a24aeb404730fa055b40d810d5 Mon Sep 17 00:00:00 2001 From: Nikita Indik Date: Wed, 18 Dec 2024 16:15:12 +0100 Subject: [PATCH] Remove transform that created a new stacking context --- .../components/rule_details/rule_details_flyout.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_details_flyout.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_details_flyout.tsx index 3425779926f7d..3909a9af5a60c 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_details_flyout.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_details_flyout.tsx @@ -40,6 +40,13 @@ const StyledEuiFlyoutBody = styled(EuiFlyoutBody)` display: flex; flex: 1; overflow: hidden; + /* + Removes "transform: translateZ(0)" from EuiFlyoutBody styles to avoid creating a new stacking context. + Fixed elements inside the flyout body are now correctly positioned relative to the viewport. + See: https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122 + The Chrome bug mentioned in the link above no longer reproduces, so this change is safe. + */ + transform: none; .euiFlyoutBody__overflowContent { flex: 1;