I use this code on a Vite project using the vanilla JS template with minimal CSS and HTML. Changing the Konva version is the only thing that makes the difference. Am I missing something? I could of course stick to the older version and call it a day, but this feels pretty wrong. The latest version I could find that doesn't lag is v7.2.5 (luckily, since this is the oldest version compatible with React Konva, but still, using the oldest supported version doesn't seem like a sustainable decision. Also, I'm not sure but it still doesn't feel as smooth as v2.4.2 but I could be hallucinating at this point ^^). Having a look at my browsers task manager reveals no significant increase in resource consumption (~5 MB RAM difference, no significant CPU consumption).
\nBrowser: Firefox 122.0
\nEdit: I did some more research. This issue only exists in Firefox. On Chromium this issue does not exists at all.
","upvoteCount":1,"answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"I think I see what you mean now. There were some internal changes in the Transformer tool, and some hit detection optimization were removed (transforming doesn't initiate dragging anymore).
\nI think it can be fixed from Konva side.
","upvoteCount":0,"url":"https://github.com/konvajs/konva/discussions/1727#discussioncomment-8608160"}}}
-
|
Hey there, a few years ago I used Konva on a project prototype (some kind of image editor), which eventually was declared a finished product by my boss. Naturally, this became more and more unmaintainable over time, so we decided to do a full rewrite with a bit more sophistication to get rid of the technical debt. So here's my issue now: Back then I was using Konva version 2.4.2 on a vanilla JS project and it worked (and still works) pretty well performance-wise. As I started the rewrite I used the latest version (9.3.3) with React and noticed that the performance was really really bad when using Transformers. I first thought this was an issue with React, but it is still there when using vanilla JS. The following code is the code I am using for testing. Running on version 9.3.3 is pretty laggy (especially noticable when you rotate the rectangle). Running the exact same code with v2.4.2 feels much smoother. Transforming the rectangle is significantly less laggy. const stage = new Konva.Stage({
container: document.getElementById('stage'),
width: 800,
height: 600,
});
const layer = new Konva.Layer();
const rect = new Konva.Rect({
x: 300,
y: 250,
width: 200,
height: 100,
fill: 'red',
draggable: true,
});
const tr = new Konva.Transformer({
node: rect,
centeredScaling: true,
})
layer.add(rect);
layer.add(tr);
stage.add(layer);
layer.draw();I use this code on a Vite project using the vanilla JS template with minimal CSS and HTML. Changing the Konva version is the only thing that makes the difference. Am I missing something? I could of course stick to the older version and call it a day, but this feels pretty wrong. The latest version I could find that doesn't lag is v7.2.5 (luckily, since this is the oldest version compatible with React Konva, but still, using the oldest supported version doesn't seem like a sustainable decision. Also, I'm not sure but it still doesn't feel as smooth as v2.4.2 but I could be hallucinating at this point ^^). Having a look at my browsers task manager reveals no significant increase in resource consumption (~5 MB RAM difference, no significant CPU consumption). Browser: Firefox 122.0 Edit: I did some more research. This issue only exists in Firefox. On Chromium this issue does not exists at all. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
|
Can you make a small online demo? I don't see any differences. |
Beta Was this translation helpful? Give feedback.
-
|
It's simply my code above with a barebones HTML structure ...
<body>
<div id="app">
<div id="stage"></div>
</div>
<script type="module" src="/main.js"></script>
</body>
...and some CSS. When I moved that example to Codepen using the cloudflare CDN for a quick demo the issue was gone there. It's still present when bundled with Vite as seen below. Here's a demo using Konva 9.3.3: https://bliepp.uber.space/demo/konva_lag/9.3.3/ Both are bundled using Vite based on the exact same source with just the Konva version changed. Wiggling/Rotating the rectangle in latest Firefox feels laggy when using Konva 9. Tested on Firefox for Windows, Linux and on Android. |
Beta Was this translation helpful? Give feedback.
-
|
I think I see what you mean now. There were some internal changes in the Transformer tool, and some hit detection optimization were removed (transforming doesn't initiate dragging anymore). I think it can be fixed from Konva side. |
Beta Was this translation helpful? Give feedback.
-
|
Ah okay, I see. Thanks for taking the time to investigate. Is there a possible workaround for now? I mean, I can live with that temporarily if there isn't one. Tbh I just recognized it due to the direct comparison I had. Otherwise I probably wouldn't have noticed it at all as it is very subtle. |
Beta Was this translation helpful? Give feedback.
-
|
Oh, I just recognized that this issue only exists in Firefox'es private tabs. On a normal window there's no noticable lag (at least on my machine). |
Beta Was this translation helpful? Give feedback.
I think I see what you mean now. There were some internal changes in the Transformer tool, and some hit detection optimization were removed (transforming doesn't initiate dragging anymore).
I think it can be fixed from Konva side.