Vertical text position is different between Safari and other browsers
kiguri opened this issue · 5 comments
As shown below, on the left is Safari, on the right is Edge, the word "Grandma" has a different vertical position. This leads to all browsers on IOS (using the Safari kernel) being different from Android
Please provide a minimal online demo. What font you used?
I'd like to bump this, we have the exact same problem.
Each browser chrome, edge, firefox and safari all render text slightly differently on the y-offset.
We haven't found a possible solution to this issue yet that viable without manually creating an offset for each browser, on each font - even that is primitive, hardcoded and is never perfect.
My issue raised similar questions when using konva-node, but the same issue is present in konva react on a regular frontend.
Every font, either served via our website, inbuilt from the system or even compiled into the react app directly, all have different rendering differences between browsers.
I've prepared a brief demonstration of the problem in CodeSandbox.
Moreover, I've included several screenshots showcasing how the text rendering varies vertically across different browsers and devices. This inconsistency persists regardless of the font used—whether native to the browser, downloaded directly from the web, or from Google Fonts.
Here's a screenshot taken on Google Chrome for macOS, the platform where the demo was developed:
Similarly, here's another screenshot from the same macOS device, but this time using Safari:
This inconsistency persists across various browsers and devices.
I trust these visuals effectively illustrate the issue.
Expanding on this issue:
Not only does the problem persist with different fonts, but it also extends to varying font sizes. Interestingly, the same fontFamily, when used with different font sizes, exhibits larger vertical gaps with larger font sizes compared to smaller ones.
Moreover, each fontFamily has its own distinct degree of vertical variance, with some fonts showcasing more pronounced inconsistencies than others. This further complicates the matter and underscores the need for a comprehensive solution.