use DOM height only for safari to fix LS

src/element/textElement.ts

@@ -289,10 +289,13 @@ export const measureText = (
     .map((x) => x || " ")
     .join("\n");
   const fontSize = parseFloat(font);
-  const height = getTextHeight(text, fontSize, lineHeight);
+  let height = getTextHeight(text, fontSize, lineHeight);
   const width = getTextWidth(text, font);
-  const { baseline } = getDOMMetrics(text, font, lineHeight);
+  const domMetrics = getDOMMetrics(text, font, lineHeight);
-  return { width, height, baseline };
+  if (isSafari) {
+    height = domMetrics.height;
+  }
+  return { width, height, baseline: domMetrics.baseline };
 };
 
 export const getDOMMetrics = (
@@ -313,7 +316,6 @@ export const getDOMMetrics = (
   }
 
   container.style.lineHeight = String(lineHeight);
-  const canvasHeight = getTextHeight(text, parseFloat(font), lineHeight);
 
   container.innerText = text;
 
@@ -326,23 +328,9 @@ export const getDOMMetrics = (
   span.style.width = "1px";
   span.style.height = "1px";
   container.appendChild(span);
-  let baseline = span.offsetTop + span.offsetHeight;
+  const baseline = span.offsetTop + span.offsetHeight;
   const height = container.offsetHeight;
 
-  if (isSafari) {
-    // 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 (canvasHeight > height) {
-      baseline += canvasHeight - height;
-    }
-    // In Safari sometimes DOM height could be more 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 (height > canvasHeight) {
-      baseline -= height - canvasHeight;
-    }
-  }
   document.body.removeChild(container);
   return { baseline, height };
 };

src/element/textWysiwyg.tsx

@@ -35,8 +35,6 @@ import {
   getMaxContainerHeight,
   getMaxContainerWidth,
   computeContainerDimensionForBoundText,
-  getDOMMetrics,
-  splitIntoLines,
 } from "./textElement";
 import {
   actionDecreaseFontSize,
@@ -46,6 +44,7 @@ import { actionZoomIn, actionZoomOut } from "../actions/actionCanvas";
 import App from "../components/App";
 import { LinearElementEditor } from "./linearElementEditor";
 import { parseClipboard } from "../clipboard";
+import { splitIntoLines } from "./textElement";
 
 const getTransform = (
   width: number,
@@ -273,16 +272,13 @@ export const textWysiwyg = ({
       } else {
         textElementWidth += 0.5;
       }
-      const { height: domHeight } = getDOMMetrics(
-        updatedTextElement.text,
-        getFontString(updatedTextElement),
-        updatedTextElement.lineHeight,
-      );
 
       let lineHeight = element.lineHeight;
-      if (isSafari && domHeight > textElementHeight) {
+      if (isSafari) {
-        lineHeight = (Math.floor(element.lineHeight * element.fontSize) /
+        //@ts-ignore
-          element.fontSize) as ExcalidrawTextElement["lineHeight"];
+        lineHeight = `${
+          element.height / splitIntoLines(element.text).length
+        }px`;
       }
 
       // Make sure text editor height doesn't go beyond viewport

src/renderer/renderElement.ts

@@ -34,6 +34,7 @@ import { AppState, BinaryFiles, Zoom } from "../types";
 import { getDefaultAppState } from "../appState";
 import {
   BOUND_TEXT_PADDING,
+  isSafari,
   MAX_DECIMALS_FOR_SVG_EXPORT,
   MIME_TYPES,
   SVG_NS,
@@ -285,10 +286,13 @@ const drawElementOnCanvas = (
             : element.textAlign === "right"
             ? element.width
             : 0;
-        const lineHeightPx = getLineHeightInPx(
+        let lineHeightPx = getLineHeightInPx(
           element.fontSize,
           element.lineHeight,
         );
+        if (isSafari) {
+          lineHeightPx = element.height / lines.length;
+        }
         const verticalOffset = element.height - element.baseline;
         for (let index = 0; index < lines.length; index++) {
           context.fillText(