Skip to content

Commit

Permalink
[Security Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip displ…
Browse files Browse the repository at this point in the history
…aying in the wrong place (elastic#204780)

**Resolves: elastic#203305
**Resolves: elastic#202206

## Summary
This PR fixes the ES|QL autosuggest tooltip displaying incorrectly in
the Rule Upgrade flyout. The issue was caused by `EuiFlyoutBody` having
`transform: translateZ(0);`, which created a new CSS stacking context
and affected the positioning of fixed elements. This PR removes the
transform to resolve the issue.

## Background
The `transform: translateZ(0);` was originally
[added](https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122)
by EUI as a workaround for a Chrome bug that no longer reproduces.

## Testing
The fix has been tested on:
 - Brave (Chromium v131, latest)
- Chromium v118 (version on which the Chrome bug
[occurred](https://issues.chromium.org/issues/40778541#comment13))

No issues were observed with the flyout in either version.

## Screenshots
**Chromium v131 after fix**
<img width="1392" alt="Scherm­afbeelding 2024-12-18 om 15 57 20"
src="https://github.com/user-attachments/assets/d3087341-e5d2-45ca-83a3-70752fc026a4"
/>

**Chromium v118 after fix**
<img width="1392" alt="Scherm­afbeelding 2024-12-18 om 15 57 36"
src="https://github.com/user-attachments/assets/cbcfde0b-e571-4f35-a3cb-e4f35394c59b"
/>

Note: The darker backdrop in older Chromium is unrelated to this change.

Work started on 18-Dec-2024.
  • Loading branch information
nikitaindik authored Dec 18, 2024
1 parent e1b17d0 commit 9b09335
Showing 1 changed file with 7 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 9b09335

Please sign in to comment.