🐛 [BUG]: flickering on some phone browsers

[aryankarim]

Is there an existing issue for this?

• [X] I have searched the existing issues and this is a new bug.

Current Behavior

The flows are flickering just like the video below.

https://github.com/bcakmakoglu/vue-flow/assets/58115075/0a03c4a2-bb44-480c-8316-774e61f19c44

Expected Behavior

Having the flows without flickering.

Steps To Reproduce

1. With Xiaomi Redmi Note 11 & Chrome: 123.0.6312.100 & OS: Android 13
2. I get the flickers on the vueflow.dev's home page and a website I have built. But flickers are not happening on vueflow.dev/examples.

Relevant log output

No response

Anything else?

No response

[bcakmakoglu]

Can you provide a proper reproduction for this? On the old Xiaomi Redmi I have lying around here there are no flickers, neither on my Mac, Windows or iPhone.

[aryankarim]

@bcakmakoglu There wouldn't be any reproduction for this one since I guess it was happening only on my phone.

But here are the things I've tried.

1. On Chrome, there wasn't any flickering when I tried barebone (vue & vue-flow). But when I added "animate: true" on edges or connected handles the flickers came back.

USB debugging gave me this warning: Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsiveAdded non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive

2. On Chrome, flickers are entirely gone after doing these:

• clear all user and cache data
• remove all Chrome updates
• update back to 123.0.6312.100

3. On Brave (Chromium: 123.0.6312.105), there is always flickers even after uninstalling and clearing all cache & data.

Well, I can move this topic to discussions in case this happens to more people.

[bcakmakoglu]

Interesting - might be that something about the svg animation isn't working right on your specific phone/browser (maybe it's an entirely different reason too, who knows 😄) I've seen other users complain that animated edges can basically eat up all their CPU for some reason, so maybe it's connected to that 🤔

I'll keep the issue open for now until I can do some investigation on this.

[aryankarim]

Sounds good. I'll also look further and share it here if I find any leads.

[bcakmakoglu]

@aryankarim Btw, does this even happen on any other flow besides the "Hero" flow on the vueflow docs? That one has some listener for size changes which might just be working wrong on your end for some reason and not an indication of an actual problem in the library

[aryankarim]

@bcakmakoglu I remember it happening only on the 'Hero' flows, the other pages were fine.

BTW I just tested again on these browsers again: Chrome: Chrome 126.0.6478.122 Brave: Chromium 126.0.6478.126

The issue has resolved, and there is no flickering.

Hence I think it was either related to some browser versioning or as you said some native code malfunctioning on my Android OS.

I think you can close this issue since it has only happened to me.

[bcakmakoglu]

Thank you for the response! :) I suspect there was something wonky going on with the breakpoint calculation that was done in the hero flow(s). Will be closing this then.