Node label blinking when hovering with enlarged font size

[likeamike]

Environment info

• Cytoscape.js version : 3.30.2
• Browser/Node.js & version : Chrome Version 128.0.6613.85 (64-bit), Firefox 129.0.2 (64-bit), Node v20.13.1

Current (buggy) behaviour

What does the bug do?

When I try to add a hover effect to a node to enlarge the font size, the node's label blinks. Specifically, when I hover over one node, the label of another node or both nodes start blinking.

node.blinking.mp4

Desired behaviour

What do you expect Cytoscape.js to do instead?

Node labels should remain stable and not blink when hovering over another node.

Minimum steps to reproduce

What do you need to do to reproduce the issue?

1. Hover over the nodes.
2. If everything appears fine initially, refresh the page and hover over the nodes again.

The issue is reproduced here: https://jsbin.com/narayik/edit?html,css,js,output

Fork/clone this JSBin demo and reproduce your issue so that your issue can be addressed quickly and effectively:
http://jsbin.com/fiqugiq

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.

[mikekucera]

By "blinking" you are referring to the non-smooth resizing animation that sometimes happens?

[mikekucera]

I'm still going to look deeper into this issue, but there appears to be a workaround that makes it at least somewhat better. The approach is to call the stop() function on the node before starting the new animation. I still get blinking sometimes, so there's still a bug, but it seems to happen much less often.

  cy.on('mouseover', 'node', function(event) {
    var node = event.target;
  
    node.stop(); // stop current animation

    node.animate({
        style: {
            'font-size': '12px',
        }, 
        duration: 300,
        queue: false,       
    });
  });
  
  cy.on('mouseout', 'node', function(event) {
    var node = event.target;
  
    node.stop(); // stop current animation

    node.animate({
        style: {
            'font-size': '10px',
        }, 
        duration: 300,
        queue: false,       
    });
  });