Fix visual bug in highlights on Safari 14

Author: domlander

dotcom-rendering/src/components/Card/components/CardWrapper.tsx

@@ -20,8 +20,7 @@ const baseCardStyles = css`
 	flex-direction: column;
 	justify-content: space-between;
 	width: 100%;
-	/* We absolutely position the faux link
-		so this is required here */
+	/* We absolutely position the faux link so this is required here */
 	position: relative;
 
 	/* Target Safari 10.1 */

dotcom-rendering/src/paletteDeclarations.ts

@@ -5887,8 +5887,16 @@ const highlightContainerMidFadeLight: PaletteFunction = () =>
 const highlightContainerMidFadeDark: PaletteFunction = () =>
 	transparentColour(sourcePalette.neutral[10], 0.6);
 
-const highlightContainerEndFadeLight: PaletteFunction = () => 'transparent';
-const highlightContainerEndFadeDark: PaletteFunction = () => 'transparent';
+/**
+ * Why not 'transparent'?
+ *
+ * Older versions of Safari (v14 and lower) misinterpret "transparent"
+ * when used in gradients: https://css-tricks.com/thing-know-gradients-transparent-black/
+ */
+const highlightContainerEndFadeLight: PaletteFunction = () =>
+	transparentColour(sourcePalette.neutral[100], 0);
+const highlightContainerEndFadeDark: PaletteFunction = () =>
+	transparentColour(sourcePalette.neutral[10], 0);
 
 const pinnedPostBorderLight: PaletteFunction = ({ theme }) => {
 	switch (theme) {