diff --git a/src-docs/src/views/context_menu/content_panel.js b/src-docs/src/views/context_menu/content_panel.js
deleted file mode 100644
index fec20bd20ec..00000000000
--- a/src-docs/src/views/context_menu/content_panel.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  EuiButton,
-  EuiContextMenuPanel,
-  EuiPopover,
-} from '../../../../src/components';
-
-import { useGeneratedHtmlId } from '../../../../src/services';
-
-export default () => {
-  const [isPopoverOpen, setPopover] = useState(false);
-  const customContextMenuPopoverId = useGeneratedHtmlId({
-    prefix: 'customContextMenuPopover',
-  });
-
-  const onButtonClick = () => {
-    setPopover(!isPopoverOpen);
-  };
-
-  const closePopover = () => {
-    setPopover(false);
-  };
-
-  const button = (
-    <EuiButton
-      size="s"
-      iconType="arrowDown"
-      iconSide="right"
-      onClick={onButtonClick}
-    >
-      Click to show some content
-    </EuiButton>
-  );
-
-  return (
-    <EuiPopover
-      id={customContextMenuPopoverId}
-      button={button}
-      isOpen={isPopoverOpen}
-      closePopover={closePopover}
-      panelPaddingSize="s"
-      anchorPosition="downLeft"
-    >
-      <EuiContextMenuPanel>
-        This context menu doesn&#39;t render items, it passes a child instead.
-      </EuiContextMenuPanel>
-    </EuiPopover>
-  );
-};
diff --git a/src-docs/src/views/context_menu/content_panel.tsx b/src-docs/src/views/context_menu/content_panel.tsx
new file mode 100644
index 00000000000..cf0bd66f49e
--- /dev/null
+++ b/src-docs/src/views/context_menu/content_panel.tsx
@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+
+import {
+  EuiButton,
+  EuiContextMenuPanel,
+  EuiPopover,
+  EuiSelectable,
+  EuiSelectableOption,
+  EuiHorizontalRule,
+  EuiContextMenuItem,
+  EuiTitle,
+  EuiSpacer,
+  EuiPanel,
+} from '../../../../src/components';
+
+import { useGeneratedHtmlId } from '../../../../src/services';
+
+export default () => {
+  const [isPopoverOpen, setPopover] = useState(false);
+  const customContextMenuPopoverId = useGeneratedHtmlId({
+    prefix: 'customContextMenuPopover',
+  });
+
+  const onButtonClick = () => {
+    setPopover(!isPopoverOpen);
+  };
+
+  const closePopover = () => {
+    setPopover(false);
+  };
+
+  const button = (
+    <EuiButton
+      size="s"
+      iconType="arrowDown"
+      iconSide="right"
+      onClick={onButtonClick}
+    >
+      Click to show some content
+    </EuiButton>
+  );
+
+  const [options, setOptions] = useState<EuiSelectableOption[]>([
+    {
+      label: 'APM',
+    },
+    {
+      label: 'filebeat-*',
+    },
+    {
+      label: 'logs-*',
+    },
+    {
+      label: 'metrics-*',
+    },
+  ]);
+
+  return (
+    <EuiPopover
+      id={customContextMenuPopoverId}
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      panelPaddingSize="none"
+      anchorPosition="downLeft"
+    >
+      <EuiContextMenuPanel>
+        <EuiContextMenuItem key="item-1" icon="indexOpen" size="s">
+          Add a field to this data view
+        </EuiContextMenuItem>
+        <EuiContextMenuItem key="item-2" icon="indexSettings" size="s">
+          Manage this data view
+        </EuiContextMenuItem>
+
+        <EuiHorizontalRule margin="none" />
+
+        <EuiPanel color="transparent" paddingSize="s">
+          <EuiTitle size="xxxs">
+            <h3>Data views</h3>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiSelectable
+            aria-label="Find a data view"
+            searchable
+            searchProps={{
+              compressed: true,
+              placeholder: 'Find a data view',
+            }}
+            options={options}
+            onChange={(newOptions) => setOptions(newOptions)}
+          >
+            {(list, search) => (
+              <>
+                {search}
+                {list}
+              </>
+            )}
+          </EuiSelectable>
+        </EuiPanel>
+      </EuiContextMenuPanel>
+    </EuiPopover>
+  );
+};
diff --git a/src-docs/src/views/context_menu/context_menu_example.js b/src-docs/src/views/context_menu/context_menu_example.js
index 72860a84a2a..48e01a01c62 100644
--- a/src-docs/src/views/context_menu/context_menu_example.js
+++ b/src-docs/src/views/context_menu/context_menu_example.js
@@ -135,7 +135,7 @@ export const ContextMenuExample = {
       title: 'Displaying custom elements',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: contentPanelSource,
         },
       ],
diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
index cd2c38130eb..5e37cec783a 100644
--- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
+++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -458,7 +458,7 @@ exports[`props options list is rendered 1`] = `
     </div>
   </div>
   <div
-    class="euiPanel euiPanel--plain euiPopover__panel euiComboBoxOptionsList css-s8iu-euiPanel-grow-m-plain-euiPopover__panel-isOpen-bottom-isOpen-bottom"
+    class="euiPanel euiPanel--plain euiPopover__panel euiComboBoxOptionsList emotion-euiPanel-grow-m-plain-euiPopover__panel-isOpen-bottom-isOpen-bottom"
     data-popover-open="true"
     data-popover-panel="true"
     data-test-subj="comboBoxOptionsList alsoGetsAppliedToOptionsList-optionsList"
diff --git a/src/themes/amsterdam/global_styling/mixins/shadow.ts b/src/themes/amsterdam/global_styling/mixins/shadow.ts
index 787d6028442..21032646b66 100644
--- a/src/themes/amsterdam/global_styling/mixins/shadow.ts
+++ b/src/themes/amsterdam/global_styling/mixins/shadow.ts
@@ -57,17 +57,19 @@ export const euiShadowMedium = (
 ) => {
   const color = _color || euiTheme.colors.shadow;
 
-  const array = [
-    `0 .9px 4px ${getShadowColor(color, 0.08, colorMode)}`,
-    `0 2.6px 8px ${getShadowColor(color, 0.06, colorMode)}`,
-    `0 5.7px 12px ${getShadowColor(color, 0.05, colorMode)}`,
-    `0 15px 15px ${getShadowColor(color, 0.04, colorMode)}`,
-  ];
-
   if (property === 'filter') {
-    return `filter: ${array.reduce((v, i) => `${v} drop-shadow(${i})`, '')};`;
+    // Using only one drop-shadow filter instead of multiple is more performant & prevents Safari bugs
+    return `filter: drop-shadow(0 5.7px 9px ${getShadowColor(
+      color,
+      0.2,
+      colorMode
+    )});`;
   } else {
-    return `box-shadow: ${array.map((v) => v)};`;
+    return `box-shadow:
+      0 .9px 4px ${getShadowColor(color, 0.08, colorMode)},
+      0 2.6px 8px ${getShadowColor(color, 0.06, colorMode)},
+      0 5.7px 12px ${getShadowColor(color, 0.05, colorMode)},
+      0 15px 15px ${getShadowColor(color, 0.04, colorMode)};`;
   }
 };
 
diff --git a/upcoming_changelogs/6604.md b/upcoming_changelogs/6604.md
new file mode 100644
index 00000000000..1077f334473
--- /dev/null
+++ b/upcoming_changelogs/6604.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed bug in `EuiPopover` where multiple filter `drop-shadow()` were causing inner shadows in Safari