Merge pull request #14430 from guardian/doml/safari-highlights-tranparency

Fix visual bugs in Safari v14

Author: domlander

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

@@ -20,22 +20,23 @@ 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 */
-	/* https://www.browserstack.com/guide/create-browser-specific-css */
+	/*
+	 * Target Safari 10.1 to 14.0
+	 * https://www.browserstack.com/guide/create-browser-specific-css
+	 * Flexbox with gap is not supported until Safari 14.1
+	 */
 	@media not all and (min-resolution: 0.001dpcm) {
-		@supports (-webkit-appearance: none) and
-			(not (stroke-color: transparent)) {
+		@supports (-webkit-appearance: none) and (not (display: flex; gap: 1em)) {
 			display: grid;
 			grid-auto-rows: min-content;
 			align-content: start;
 		}
 	}
 
-	/* a tag specific styles */
+	/* <a /> tag specific styles */
 	color: inherit;
 	text-decoration: none;
 `;

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) {