From 3a68f0ae7b668a5b9bb6a3881c8c8d999ab925c9 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Mon, 3 Apr 2023 16:35:40 +0530
Subject: [PATCH] fix safari backward compat

---
 src/element/textElement.ts    | 14 +++++++++++++-
 src/renderer/renderElement.ts |  3 ++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/element/textElement.ts b/src/element/textElement.ts
index 49159818a0..f9bd01f3d6 100644
--- a/src/element/textElement.ts
+++ b/src/element/textElement.ts
@@ -14,6 +14,7 @@ import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   FONT_FAMILY,
+  isSafari,
   TEXT_ALIGN,
   VERTICAL_ALIGN,
 } from "../constants";
@@ -312,6 +313,7 @@ export const measureBaseline = (
   }
 
   container.style.lineHeight = String(lineHeight);
+  const canvasHeight = getTextHeight(text, parseFloat(font), lineHeight);
 
   container.innerText = text;
 
@@ -324,7 +326,17 @@ export const measureBaseline = (
   span.style.width = "1px";
   span.style.height = "1px";
   container.appendChild(span);
-  const baseline = span.offsetTop + span.offsetHeight;
+  let baseline = span.offsetTop + span.offsetHeight;
+  const domHeight = container.offsetHeight;
+
+  // In Safari sometimes DOM height could be less than canvas height due to
+  // which text could go out of the bounding box hence shifting the baseline
+  // to make sure text is rendered correctly
+  if (isSafari) {
+    if (canvasHeight > domHeight) {
+      baseline += canvasHeight - domHeight;
+    }
+  }
   document.body.removeChild(container);
   return baseline;
 };
diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts
index d45e7b31a9..2c28a6a23e 100644
--- a/src/renderer/renderElement.ts
+++ b/src/renderer/renderElement.ts
@@ -290,8 +290,9 @@ const drawElementOnCanvas = (
           element.lineHeight,
         );
         const verticalOffset = element.height - element.baseline;
-
+        console.log(verticalOffset);
         for (let index = 0; index < lines.length; index++) {
+          console.log("FACTOR", verticalOffset);
           context.fillText(
             lines[index],
             horizontalOffset,