Path disapear #292
Comments
|
Thanks for write. What browser are you testing with, have you tried more than one? Have you tried another code? The demo is an example and may include some extra css code. |
|
Google Chrome 95.0.4638.69 (latest). Only Google Chrome. Yes, I've tried a custom implementation, it's not about styles. Perhaps some subtleties of drawing svg that we do not know about |
|
Not only Windows. Ubuntu, Mac too. Browser zoom to 110+% |
|
mmmm 🤔 It reminds me of this other issue that google changed the behavior: #218 I'm going to update chrome to see if I see something. |
|
https://www.awesomescreenshot.com/video/5931938?key=c9ce1a256559fcf1a10ab28fbfb8ba41 Simple steps to reproduce. I am using your example, because its simple to debug for you. |
|
I have updated chrome to the latest version. Fail with the demo: https://jerosoler.github.io/Drawflow/ It does not fail with this other demo: https://jerosoler.github.io/drawflow-vue3-example/ It also does not fail with exte file: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"
/>
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
</head>
<body>
<div id="drawflow"></div>
<style>
#drawflow {
position: relative;
text-align:initial;
width: 100%;
height: 800px;
border: 1px solid red;
}
</style>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();
editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
</script>
</body>
</html>So I understand that it is with the demo some kind of css problem ... Can you try the other tests? |
|
Change To in drawflow.css (or drawflow.min.css) |
|
Have you tried it with the other demos if it also happens to you? If I modify the value that comments the nodes are overlapped:
|
|
Only in this example https://jerosoler.github.io/Drawflow/ |
|
Then we can rule out failure of the library and yes of the demo. |
|
In https://jerosoler.github.io/drawflow-vue3-example/ Drag and drop more than 4 blocks after default two blocks. https://www.awesomescreenshot.com/video/5957823?key=a0ae2997a36e67b706b4ad37292f6bb5 |
|
Thanks for the pull request! Can you try it? Solved with one line of css: .drawflow {
perspective: 0;
}Thanks in advance. |
|
OMG! Its working! Thanks! |
Hello!
https://www.awesomescreenshot.com/video/5918467?key=688922cdf04e2852ea484b5377a25c7d
https://www.awesomescreenshot.com/video/5918484?key=48505f9a510d4eee998062b4b4897a92
https://www.awesomescreenshot.com/video/5918486?key=ca69da47f12fa5208e7b6bc869275790
If you use a scaling of 125% or more in Windows, strange behavior of lines appears on the canvas. They disappear in some areas. It was not possible to establish any exact patterns.
At a screen resolution of 1920 × 1080, the bug appears already at 150% of the scale. At 4K resolution, the same is 150%. This is the default frequent scaling in windows for 4k screens.
thanks
The text was updated successfully, but these errors were encountered: