[EuiDataGrid] Fix missing cell popover shadows in Safari (#6163)

* Work around bizarre Safari filter/overflow CSS bug * Changelog * go away sasslint
elastic · Aug 23, 2022 · 27b536c · 27b536c
1 parent 94e9827
commit 27b536c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
@@ -104,6 +104,13 @@
   max-width: 400px !important;
   max-height: 400px !important;
   z-index: $euiZDataGridCellPopover !important;
+  // Workaround for a Safari CSS bug when using both `overflow: auto` & `filter: drop-shadow`
+  // (see https://github.com/elastic/eui/issues/6151)
+  // Disables the default EuiPopover filter drop-shadow and uses box-shadow instead,
+  // since we don't use the popover arrow in any case for cell popovers
+  filter: none;
+  // sass-lint:disable-block mixins-before-declarations
+  @include euiBottomShadow; // TODO: Convert to euiShadowMedium() in Emotion
 }
 
 .euiDataGridRowCell__expandFlex {

diff --git a/upcoming_changelogs/6163.md b/upcoming_changelogs/6163.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed missing `EuiDataGrid` cell popover shadows in Safari
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Bug fixes

		- Fixed missing `EuiDataGrid` cell popover shadows in Safari