Giters

bcakmakoglu / vue-flow

A highly customizable Flowchart component for Vue 3. Features seamless zoom & pan 🔎, additional components like a Minimap 🗺 and utilities to interact with state and graph.

Home Page:https://vueflow.dev/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

🐛 [BUG]: flickering on some phone browsers

aryankarim opened this issue · comments

commented

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

commented

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.

commented

@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

  1. 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
  1. 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.

commented

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.

commented

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