search

konvajs / konva

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://konvajs.org/
Other
11.07k stars 896 forks source link

Vertical text position is different between Safari and other browsers #1751

Closed kiguri closed 4 weeks ago

kiguri commented 2 months ago

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

Screenshot 2024-04-29 at 10 22 41
lavrton commented 2 months ago

Please provide a minimal online demo. What font you used?

Adam-Greenan commented 2 months ago

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.

https://github.com/konvajs/konva/issues/1694

Adam-Greenan commented 2 months ago

https://codesandbox.io/p/devbox/konva-konva-react-text-location-rendering-on-different-browser-devices-issue-https-github-com-konvajs-konva-issues-1751-z2kkpw?file=%2Fsrc%2FApp.jsx%3A43%2C44

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: Screenshot 2024-05-08 at 13 52 23

Similarly, here's another screenshot from the same macOS device, but this time using Safari: Screenshot 2024-05-08 at 13 56 13

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.

Adam-Greenan commented 1 month ago

Bump

lavrton commented 1 month ago

Please take a look into this comment: https://github.com/konvajs/konva/issues/559#issuecomment-2113766161 I need a help with testing. I hope that will fix the issue.

lavrton commented 4 weeks ago

Closing the issue for now. I am not sure yet when and how the fix defined in https://github.com/konvajs/konva/issues/559#issuecomment-2113766161 will be a default behavior. Looking for a more feedback.