feat(popover): overflow bug on Safari (#3566)

# Popover overflow bug on Safari browser

`translateZ` has been added to popover `&.is-open`. This is to prevent clipping of the `filter: drop-shadow` when `overflow` is applied on `spectrum-Popover`. This bug happens on the Safari browser. `translateZ or translate3d` on the `&.is-open` class accelerates the component to the GPU layer maintaining any transformations and animations.

`overflow: visible` applied to CSS `--withTip` so the tip is still visible if `overflow` is applied to the component.

Author: aramos-adobe

.changeset/perfect-worms-march.md

@@ -0,0 +1,9 @@
+---
+"@spectrum-css/popover": minor
+---
+
+# Popover overflow bug on Safari browser
+
+`translateZ` has been added to popover `&.is-open`. This is to prevent clipping of the `filter: drop-shadow` when `overflow` is applied on `spectrum-Popover`. This bug happens on the Safari browser. `translateZ or translate3d` on the `&.is-open` class accelerates the component to the GPU layer maintaining any transformations and animations.
+
+`overflow: visible` applied to CSS `--withTip` so the tip is still visible if `overflow` is applied to the component.

components/popover/dist/metadata.json

@@ -83,6 +83,7 @@
     ".spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip",
     ".spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip",
     ".spectrum-Popover.is-open",
+    ".spectrum-Popover.spectrum-Popover--withTip",
     ".spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle",
     "[dir=\"rtl\"] .spectrum-Popover--end-bottom.is-open",
     "[dir=\"rtl\"] .spectrum-Popover--end-top.is-open",

components/popover/index.css

@@ -75,6 +75,9 @@
 
 	/* has tip triangle */
 	&.spectrum-Popover--withTip {
+		/* Prevents clipping of the tip */
+		overflow: visible;
+
 		.spectrum-Popover-tip {
 			/* triangle polygon */
 			.spectrum-Popover-tip-triangle {
@@ -115,7 +118,8 @@
 
 	/* popover animates upward ⬆ */
 	&.is-open {
-		transform: translateY(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))));
+		/* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */
+		transform: translateY(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))) translateZ(0);
 	}
 }
 
@@ -133,7 +137,8 @@
 
 	/* popover animates downward ⬇ */
 	&.is-open {
-		transform: translateY(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)));
+		/* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */
+		transform: translateY(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0);
 	}
 }
 
@@ -150,7 +155,8 @@
 
 	/* popover animates towards right ⮕ */
 	&.is-open {
-		transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)));
+		/* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */
+		transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0);
 	}
 }
 
@@ -167,7 +173,8 @@
 
 	/* popover animates towards left ⬅ */
 	&.is-open {
-		transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))));
+		/* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */
+		transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))) translateZ(0);
 	}
 }
 
@@ -183,12 +190,13 @@
 
 	/* LTR read, popover animates towards left ⬅ */
 	&.is-open {
-		transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))));
+		/* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */
+		transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))) translateZ(0);
 	}
 
 	/* RTL read, popover animates towards right ⮕ */
 	&.is-open:dir(rtl) {
-		transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)));
+		transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0);
 	}
 }
 
@@ -204,13 +212,15 @@
 
 	/* LTR read, popover animates towards right ⮕ */
 	&.is-open {
-		transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)));
+		/* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */
+		transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0);
 	}
 
 	/* RTL read, popover animates towards left ⬅ */
 	&:dir(rtl) {
 		&.is-open {
-			transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))));
+			/* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */
+			transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))) translateZ(0);
 		}
 	}
 }