fix safari backward compat

This commit is contained in:
Aakansha Doshi 2023-04-03 16:35:40 +05:30
parent c0e88fbc54
commit 3a68f0ae7b
2 changed files with 15 additions and 2 deletions

View file

@ -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;
};

View file

@ -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,