GoogleChromeLabs / ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
https://visbug.web.app
Apache License 2.0
5.46k stars 286 forks source link

Can not smoothly change text color and background color #475

Open betagoo opened 3 years ago

betagoo commented 3 years ago

Color change is very slow with Hue Shift tool. You can try on this page https://www.tcmeble.pl/kategorie_produkty/narozniki/

  1. Select all products titles containers with class .entry-title (127 containers)
  2. Choose for example Hue Shift tool.
  3. Try choose new text color from palette. Click left mouse button on color palette and try move mouse (do not release left button). Color picker jumps, not move smoothly.

If there are many containers selected, color tool work very slow. Solution is, apply changes only to elements visible into viewport. And if user scroll page, apply to another elements. In this moment color tool probably apply color changes to all elements, and performance are getting lower.

I try this on two computers, AMD ryzen 3900x with Nvidia RTX 1660, and Dell Precission T1650 Xeon 8 cores, and Quadro K4000.

argyleink commented 3 years ago

Is this what you're describing, the lag experienced when dragging across the color input?

color-lag

This isn't a visbug unfortunately, this is an expensive relationship between color and the color picker. The color picker while dragging is sending way too many events for the page to render and keep up. Clicking a new color works fast.

While I want to mark this bug as "cant fix", I do think there's room for an investigation about rate limiting the color input change event so it doesnt spam the DOM. we may be able to mitigate the issue.