From 5dff68625421efc46134b3335f6daa3ec39e82d4 Mon Sep 17 00:00:00 2001
From: Edward Hibbert <edward@ehibbert.org.uk>
Date: Mon, 13 May 2024 09:53:10 +0100
Subject: [PATCH] Older browsers not rendering stats correctly.

---
 resources/js/components/StatsShare.vue | 30 ++++++++++++++++++++------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/StatsShare.vue b/resources/js/components/StatsShare.vue
index ba380cae5..b65ec18f2 100644
--- a/resources/js/components/StatsShare.vue
+++ b/resources/js/components/StatsShare.vue
@@ -398,9 +398,14 @@ export default {
             let text = ''
 
             // Use the line height of this as our standard for moving down the image.
-            let lineHeight = ctx.measureText(
-                this.$lang.get('partials.share_modal_weve_saved') + str + this.$lang.get('partials.share_modal_of_co2')
-            ).emHeightAscent + ctx.measureText(str).emHeightDescent + MARG * 2
+            //
+            // Older browsers don't support emHeight*
+            let measure1 = ctx.measureText(this.$lang.get('partials.share_modal_weve_saved') + str + this.$lang.get('partials.share_modal_of_co2'))
+            let measure2 = ctx.measureText(str)
+            let asc = measure1.emHeightAscent ? 'emHeightAscent' : 'actualBoundingBoxAscent'
+            let desc = measure1.emHeightDescent ? 'emHeightDescent' : 'actualBoundingBoxDescent'
+            let lineHeight = measure1[asc] + measure2[desc] + MARG * 2
+            console.log('Line height', lineHeight)
 
             let wholeline
 
@@ -465,9 +470,12 @@ export default {
 
             ctx.font = "bold " + this.smallerFontSize + "px Asap, sans-serif"
 
-            lineHeight = ctx.measureText(
-                this.$lang.get('partials.share_modal_weve_saved') + str + this.$lang.get('partials.share_modal_of_co2')
-            ).emHeightAscent + ctx.measureText(str).emHeightDescent + MARG * 2
+            // Older browsers don't support emHeight*
+            measure1 = ctx.measureText(this.$lang.get('partials.share_modal_weve_saved') + str + this.$lang.get('partials.share_modal_of_co2'))
+            measure2 = ctx.measureText(str)
+            asc = measure1.emHeightAscent ? 'emHeightAscent' : 'actualBoundingBoxAscent'
+            desc = measure1.emHeightDescent ? 'emHeightDescent' : 'actualBoundingBoxDescent'
+            lineHeight = measure1[asc] + measure2[desc] + MARG * 2
 
             if (RANGES[ix][2] != 'Hectare') {
               if (this.portrait) {
@@ -533,6 +541,7 @@ export default {
       // Write the text.
       ctx.fillStyle = colour || 'black'
       ctx.strokeStyle = colour || 'black'
+      console.log('Fill', str, x, y)
       ctx.fillText(str, x, y)
 
       // Return where we're up to.
@@ -556,7 +565,14 @@ export default {
     },
     fillWhiteBlackBox(str, x, y) {
       const ctx = this.ctx
-      ctx.roundRect(x, y - ctx.measureText(str).emHeightAscent - MARG, ctx.measureText(str).width + MARG * 2, ctx.measureText(str).emHeightAscent + ctx.measureText(str).emHeightDescent + MARG * 2, RADIUS)
+
+      if (ctx.roundRect) {
+        ctx.roundRect(x, y - ctx.measureText(str).emHeightAscent - MARG, ctx.measureText(str).width + MARG * 2, ctx.measureText(str).emHeightAscent + ctx.measureText(str).emHeightDescent + MARG * 2, RADIUS)
+      } else {
+        // Older browsers.
+        ctx.rect(x, y - ctx.measureText(str).emHeightAscent - MARG, ctx.measureText(str).width + MARG * 2, ctx.measureText(str).emHeightAscent + ctx.measureText(str).emHeightDescent + MARG * 2)
+      }
+
       ctx.fill()
 
       // Looks like we need a beginPath() to prevent future calls to roundRect working on the same rectangle and