🐛 [BUG]: flickering on some phone browsers

[aryankarim]

Is there an existing issue for this?

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

Current Behavior

The flows are flickering just like the video below.

WhatsApp.Video.2024-04-11.at.12.15.53.AM.mp4

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.