search

retejs / rete

JavaScript framework for visual programming
https://retejs.org
MIT License
10.17k stars 653 forks source link

Connections disappearing when zoom in Chrome #555

Closed saracq closed 3 years ago

saracq commented 3 years ago

Since some days, I have problems with the rendering of connections in Chrome when my screen has a zoom of 125% (recommended by Windows). The connections are no longer centered in the sockets and, zooming rete container using the mouse wheel, some lines totally disappear. This happens even in a particular environment, where the versions of rete libraries were set 6 months ago and where I'm sure this behaviour did not happen before, so I think that the cause is something relating to Chrome. Using Firefox all works fine indeed. You can see an example below with same zoom. Chrome image Firefox image The versions I use are the following

{   
    ...,
    "nuxt": "^2.15.6",
    "rete": "^1.4.5-rc.1",
    "rete-area-plugin": "^0.2.1",
    "rete-connection-plugin": "^0.9.0",
    "rete-context-menu-plugin": "^0.6.0-rc.1",
    "rete-vue-render-plugin": "^0.5.1",
    ...,
}

Any ideas on how to solve this? Thanks!

rvanasa commented 3 years ago

This happened to me as well. For whatever reason, it was caused by having duplicate element IDs somewhere else in the application. Try running document.querySelectorAll('[id]') to see if you accidentally assigned the same id attribute to two or more elements somewhere on the page.

saracq commented 3 years ago

Hi @rvanasa, thanks for your suggestion! Unfortunately this not solve my problem, I don't have multiple elements with the same id on this page.

Ni55aN commented 3 years ago

@saracq do you have a public example where this issue can be reproduced?

rvanasa commented 3 years ago

This happened to me again for a different (unknown) reason, and I was able to fix it with the following CSS:

.connection {
    position: static;
}

@saracq, hopefully this works for you in the short term. If static positioning doesn't break compatibility with other browsers, the problem could also be fixed by removing this line in src/view/connection.ts.

saracq commented 3 years ago

@Ni55aN, sorry for the delay in replying. Unfortunatelly I don't have a public example, nevertheless the solution proposed by @rvanasa works for me! Thank you so much for your help @rvanasa!