Misaligned routes when chrome zoom is not 100%

[TLeiter]

When user has a different zoom factor in Chrome, the routes are not alligned.

The following example was done with the demo application:

[jerosoler]

Uhmmm. What is your version of crhome?

[TLeiter]

Last one Version 92.0.4515.107 (Official Build) (64-bit)

[TLeiter]

Zoom at 150% works fine, but 125% not.

[jerosoler]

Work in 125%

This I think could be due to a browser problem rather than a library problem.

With the library you can set a zoom.

[Fr1411]

i have the same problem with chrome Versión 92.0.4515.107 (Build oficial).
No zoom.

zoom 80% its works

[jerosoler]

@Fr1411
If you move any node, are they still wrong?

I see the images of the demo.
The same thing happens without the demo.

[jerosoler]

I just installed the latest version and I see that it also happens.

[Fr1411]

@jerosoler yes! if i move any node it´s the same.
In my project the situation is equal

[Fr1411]

@jerosoler Do you think this problem will be solved?

[Ammy22]

Temporary fix is

[jerosoler]

Fix in new version 0.0.48 https://github.com/jerosoler/Drawflow/releases/tag/0.0.48

Removed transform tranlate from connection.

The new css looks like this:

.drawflow .connection {
  position: absolute;
  pointer-events: none;
}
.drawflow .connection .main-path {
  fill: none;
  stroke-width: 5px;
  stroke: steelblue;
  pointer-events: all;
}
.drawflow .connection .main-path:hover {
  stroke: #1266ab;
  cursor: pointer;
}

.drawflow .connection .main-path.selected {
  stroke: #43b993;
}

.drawflow .connection .point {
  cursor: move;
  stroke: black;
  stroke-width: 2;
  fill: white;
  pointer-events: all;
}

Update Demo page

[Ammy22]

thank you so much for fixing it

…

________________________________ From: Jero Soler ***@***.***> Sent: 04 August 2021 22:02 To: jerosoler/Drawflow ***@***.***> Cc: Ammy ***@***.***>; Comment ***@***.***> Subject: Re: [jerosoler/Drawflow] Misaligned routes when chrome zoom is not 100% (#218) Fix in new version 0.0.48 https://github.com/jerosoler/Drawflow/releases/tag/0.0.48 Removed transform tranlate from connection. The new css looks like this: .drawflow .connection { position: absolute; pointer-events: none; } .drawflow .connection .main-path { fill: none; stroke-width: 5px; stroke: steelblue; pointer-events: all; } .drawflow .connection .main-path:hover { stroke: #1266ab; cursor: pointer; } .drawflow .connection .main-path.selected { stroke: #43b993; } .drawflow .connection .point { cursor: move; stroke: black; stroke-width: 2; fill: white; pointer-events: all; } Update Demo page — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#218 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AN6MZCSQBXWQ6MOBLDQWWOLT3FTQFANCNFSM5A7QMZHA>. Triage notifications on the go with GitHub Mobile for iOS<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android<https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email>.

[Fr1411]

Thank you!