Font kerning non fixed upon zooming

[EliotRagueneau]

Environment info

• Cytoscape.js version : 3.9.2
• Browser/Node.js & version : Arc Browser 1.47.1

Current (buggy) behaviour

What does the bug do?

The font seems to change the kerning upon reaching a certain threshold of zooming.

FontKernelBug.mov

Desired behaviour

It should be consistent (Ideally with the situation when zoomed out, as it seems closer to the definitions).

Minimum steps to reproduce

Unfortunately I wasn't able to reproduce the issue in the demo

For reviewers

Reviewers should ensure that the following tasks are carried out for incorporated issues:

• Ensure that the reporter has included a reproducible demo. They can easily fork this JSBin demo: http://jsbin.com/fiqugiq
• The issue has been associated with a corresponding milestone.
• The commits have been incorporated into the corresponding branches. Bug-fix patches go on
  • master,
  • unstable, and
  • the previous feature release branch (e.g. 1.1.x if the current release is 1.2).
• The issue has been labelled as a bug, if necessary.

[maxkfranz]

If you change the font to something like Helvetica Neue or Courier, do you still see this behaviour?

[EliotRagueneau]

It does somehow:

CourierBugging.mov

[maxkfranz]

Some fonts render differently at different scales generally. Often you would not notice, because the changes from small changes in zoom level would be slight.

Cytoscape uses visual caches. What you're seeing is a step function change in how the font is rendered rather than a smoother transition, because the cache is not used (or useful) when zoomed in very far.

Given that the cache gives significant performance improvements and the changing the cache to accommodate fonts that vary widely would be expensive, it may be best to make a careful choice of font that wouldn't have this problem.

Which font face are you using?

[EliotRagueneau]

I am using Roboto font.

[maxkfranz]

Open Sans is similar but does not exhibit this issue, as far as I'm aware.

[EliotRagueneau]

I really tried to repoduce the issue on the fiddle, but I couldn't manage to reproduce there, but in my usage context, its consistently happening on the same nodes, and is most visible when the text is overflowing the max width, see

• the fiddle https://jsbin.com/sewapetafa/1/edit?html,css,js,output
• My usage context https://reactome-pwp.github.io/PathwayBrowser/R-HSA-168643?select=R-HSA-925458

I did try many fonts, and the problem is present with all of them :/

[EliotRagueneau]

I noticed that the font problem occurs when zoom level is exactly bellow 1.
Maybe that can help understand the origin of the problem

[EliotRagueneau]

Open Sans is similar but does not exhibit this issue, as far as I'm aware.

Still the problem is there in my context

[maxkfranz]

The bug isn't reproducible in Safari

[EliotRagueneau]

From what I could see, it's a problem on Chrome and Chromium based browsers like Arc. Firefox and Safari do not have the issue

[maxkfranz]

Sounds like a Chromium issue then. Maybe there’s an existing issue in their tracker that we could cross-reference?

…

________________________________ From: Eliot Ragueneau ***@***.***> Sent: Tuesday, July 9, 2024 8:54:19 AM To: cytoscape/cytoscape.js ***@***.***> Cc: Max Franz ***@***.***>; Comment ***@***.***> Subject: Re: [cytoscape/cytoscape.js] Font kerning non fixed upon zooming (Issue #3250) From what I could see, it's a problem on Chrome and Chromium based browsers like Arc. Firefox and Safari do not have the issue — Reply to this email directly, view it on GitHub<#3250 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAHRO42NAYZAQOTFTLYFLJ3ZLPMPXAVCNFSM6AAAAABJQLWLM6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMJXGY2TINJYGI>. You are receiving this because you commented.Message ID: ***@***.***>