Patch - H1 thickline: Fix border rendering bug in older browsers (#2415)

Some older browsers (most notably Safari <= 15.3) incorrectly set border-style: solid; whenever the border-image property was used. That in turn caused affected browsers to render the thickline style as a three-sided border. This works around the issue by setting the thickline style's left/right/top border-*-width properties to 0. Thanks to @donmcdill for pitching this approach (other ways I prototyped didn't work). Fixes #2396.
wet-boew · Aug 28, 2024 · 08498cb · 08498cb
1 parent 9b648bf
commit 08498cb
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 14 deletions.
diff --git a/_data/sites.json b/_data/sites.json
@@ -2179,10 +2179,10 @@
 		"en": "Documentation on how to use the Main title of the page component.",
 		"fr": "Documentation sur l'utilisation du composant Titre principal."
 	},
-	"modified": "2024-01-29",
+	"modified": "2024-08-27",
 	"componentName": "main-page-title",
 	"status": "stable",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"pages": {
 		"docs": [
 			{
@@ -2235,7 +2235,7 @@
 				"en": "https://design.canada.ca/styles/typography.html",
 				"fr": "https://conception.canada.ca/styles/typographie.html"
 			},
-			"iteration": "_:iteration_mpt_2",
+			"iteration": "_:iteration_mpt_3",
 			"example": [
 				{
 					"en": { "href": "../../templates/content-page/content-en.html", "text": "Content page (main page title)" },
@@ -2247,6 +2247,10 @@
 				"_:implement_mpt_gcweb"
 			],
 			"history": [
+				{
+					"en": "2024-08 - Fixed three-sided border bug in Safari &lt;= 15.3",
+					"fr": "2024-08 - Correction d’un bogue de bordure à trois côtés dans Safari &lt;= 15.3"
+				},
 				{
 					"en": "2024-01 - Visual update",
 					"fr": "2024-01 - Mise à jour visuelle"
@@ -2289,7 +2293,7 @@
 	"implementation": [
 		{
 			"@id": "_:implement_mpt",
-			"iteration": "_:iteration_mpt_2",
+			"iteration": "_:iteration_mpt_3",
 			"name": {
 				"en": "Standard",
 				"fr": "Standard"
@@ -2444,7 +2448,7 @@
 		{
 			"@id": "_:cs_mpt",
 			"name": "Default h1",
-			"baseOnIteration": "_:iteration_mpt_2",
+			"baseOnIteration": "_:iteration_mpt_3",
 			"detectableBy": "Visual inspection can be used to detect the size of the line. The width of the line should be 71px (3.55em) long and the thickness should be 3.6px (0.18em), with the color #af3c43.",
 			"layout": "The line is positioned below the text.",
 			"semantic": "h1",
@@ -2502,7 +2506,18 @@
 			"breaking": [
 				"Style: Width of the line should 70px and the thickness .18em #af3c43. Followed by optional byline, tagline or subtitle"
 			],
-			"predecessor": "_:iteration_mpt_1"
+			"predecessor": "_:iteration_mpt_1",
+			"successor": "_:iteration_mpt_3"
+		},
+		{
+			"@id": "_:iteration_mpt_3",
+			"name": "Visual update 2024 (<code>border-style</code> bug fix)",
+			"date": "2024-08",
+			"detectableBy": "Visual inspection can be used to detect the size of the line. The width of the line should be 71px (3.55em) long and the thickness should be 3.6px (0.18em), with the color #af3c43. The H1's CSS should have left/right/top <code>border-*-width: 0;</code> properties.",
+			"fixes": [
+				"Style: Added left/right/top <code>border-*-width: 0;</code> properties to avoid three-sided borders in Safari &lt;= 15.3."
+			],
+			"predecessor": "_:iteration_mpt_2"
 		},
 		{
 			"@id": "_:iteration_smpt_1",

diff --git a/méli-mélo/th-empathy/style.css b/méli-mélo/th-empathy/style.css
@@ -39,6 +39,9 @@ h1#wb-cont.empathy {
     border-bottom: 0.18em solid #5C2790;
     border-image: linear-gradient(to right, #5C2790 71px, transparent 71px);
     border-image-slice: 1;
+	border-left-width: 0;
+	border-right-width: 0;
+	border-top-width: 0;
 }
 
 /*  Thematic Steps Quiz */

diff --git a/sites/main-page-title/_base.scss b/sites/main-page-title/_base.scss
@@ -4,6 +4,9 @@ h1#wb-cont, hgroup#wb-cont h1 {
 	border-bottom: $main-page-title-rule-thickness solid $main-page-title-rule-color;
 	border-image: linear-gradient(to right, $main-page-title-rule-color $main-page-title-rule-width, transparent $main-page-title-rule-width);
 	border-image-slice: 1;
+	border-left-width: 0;
+	border-right-width: 0;
+	border-top-width: 0;
 }
 
 hgroup#wb-cont {

diff --git a/sites/main-page-title/index.json-ld b/sites/main-page-title/index.json-ld
@@ -14,10 +14,10 @@
 		"en": "Documentation on how to use the Main title of the page component.",
 		"fr": "Documentation sur l'utilisation du composant Titre principal."
 	},
-	"modified": "2024-01-29",
+	"modified": "2024-08-27",
 	"componentName": "main-page-title",
 	"status": "stable",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"pages": {
 		"docs": [
 			{
@@ -70,7 +70,7 @@
 				"en": "https://design.canada.ca/styles/typography.html",
 				"fr": "https://conception.canada.ca/styles/typographie.html"
 			},
-			"iteration": "_:iteration_mpt_2",
+			"iteration": "_:iteration_mpt_3",
 			"example": [
 				{
 					"en": { "href": "../../templates/content-page/content-en.html", "text": "Content page (main page title)" },
@@ -82,6 +82,10 @@
 				"_:implement_mpt_gcweb"
 			],
 			"history": [
+				{
+					"en": "2024-08 - Fixed three-sided border bug in Safari &lt;= 15.3",
+					"fr": "2024-08 - Correction d’un bogue de bordure à trois côtés dans Safari &lt;= 15.3"
+				},
 				{
 					"en": "2024-01 - Visual update",
 					"fr": "2024-01 - Mise à jour visuelle"
@@ -124,7 +128,7 @@
 	"implementation": [
 		{
 			"@id": "_:implement_mpt",
-			"iteration": "_:iteration_mpt_2",
+			"iteration": "_:iteration_mpt_3",
 			"name": {
 				"en": "Standard",
 				"fr": "Standard"
@@ -279,7 +283,7 @@
 		{
 			"@id": "_:cs_mpt",
 			"name": "Default h1",
-			"baseOnIteration": "_:iteration_mpt_2",
+			"baseOnIteration": "_:iteration_mpt_3",
 			"detectableBy": "Visual inspection can be used to detect the size of the line. The width of the line should be 71px (3.55em) long and the thickness should be 3.6px (0.18em), with the color #af3c43.",
 			"layout": "The line is positioned below the text.",
 			"semantic": "h1",
@@ -337,7 +341,18 @@
 			"breaking": [
 				"Style: Width of the line should 70px and the thickness .18em #af3c43. Followed by optional byline, tagline or subtitle"
 			],
-			"predecessor": "_:iteration_mpt_1"
+			"predecessor": "_:iteration_mpt_1",
+			"successor": "_:iteration_mpt_3"
+		},
+		{
+			"@id": "_:iteration_mpt_3",
+			"name": "Visual update 2024 (<code>border-style</code> bug fix)",
+			"date": "2024-08",
+			"detectableBy": "Visual inspection can be used to detect the size of the line. The width of the line should be 71px (3.55em) long and the thickness should be 3.6px (0.18em), with the color #af3c43. The H1's CSS should have left/right/top <code>border-*-width: 0;</code> properties.",
+			"fixes": [
+				"Style: Added left/right/top <code>border-*-width: 0;</code> properties to avoid three-sided borders in Safari &lt;= 15.3."
+			],
+			"predecessor": "_:iteration_mpt_2"
 		},
 		{
 			"@id": "_:iteration_smpt_1",

diff --git a/sites/main-page-title/main-page-title-en.md b/sites/main-page-title/main-page-title-en.md
@@ -1,6 +1,6 @@
 ---
 altLangPage: "main-page-title-fr.html"
-dateModified: "2024-01-29"
+dateModified: "2024-08-27"
 description: "Documentation on the default H1 use as the main title of a page with a short bold red underline."
 language: "en"
 pageclass: "wb-prettify all-pre"

diff --git a/sites/main-page-title/main-page-title-fr.md b/sites/main-page-title/main-page-title-fr.md
@@ -1,6 +1,6 @@
 ---
 altLangPage: "main-page-title-en.html"
-dateModified: "2024-01-29"
+dateModified: "2024-08-27"
 description: "Documentation à propos du H1 par défaut souligné d'une courte ligne rouge en gras."
 language: "fr"
 pageclass: "wb-prettify all-pre"