search

evilmartians / oklch-picker

Color Picker for LCH
https://oklch.com
Other
849 stars 65 forks source link

Freezing interface using drag-n-drop on macbook with intel in chrome #52

Closed vyadl closed 2 years ago

vyadl commented 2 years ago

Hardware: MacBook Pro (Retina, 13-inch, Early 2015) 2,7 GHz Dual-Core Intel Core i5 8 GB 1867 MHz DDR3 Intel Iris Graphics 6100 1536 MB Software Google chrome Version 103.0.5060.114 (Official Build) (x86_64)

When start drag-n-drop on 2d-graphics in few seconds all graphics freeze. It happens in approximately 50%.

Tried also in Firefox - everything is nice - without lagging or freezing and with much better quality of intermediate charts.

https://user-images.githubusercontent.com/17265460/178107935-d92ef974-8672-4653-99b7-c1fd20e8b5cb.mov

ai commented 2 years ago

Do you any errors in the Chrome DevTools?

vyadl commented 2 years ago
image
ai commented 2 years ago

Got it! I know the reason.

I will try to fix it today or tomorrow.

ai commented 2 years ago

Thanks for the help

ai commented 2 years ago

This fix could resolve the problem 3eedfc4

Can you check?

vyadl commented 2 years ago

In some way it fixed, but now it's without permanent feedback. Now in chrome 2d-graphics works like with debounce (on video it looks like throttled, but the behaviour is different with screen recording and without). In firefox when I change one graphic just one or zero other graphics changes (depends on which I change).

On the video the first part is chrome and the second one is firefox. https://user-images.githubusercontent.com/17265460/178236420-51a55c23-98a3-4b48-a516-a64de14fd9c1.mov

ai commented 2 years ago

In some way it fixed, but now it's without permanent feedback.

Yes, it happens because there is no enough power to re-render 2 graphs in 16 ms

ai commented 2 years ago

I increase max scale from 4 to 8. It should add real time re-render for more cases.

vyadl commented 2 years ago

just FYI I installed project locally and tried different values for this constant, and MAX_SCALE = 128 works great in Firefox and realtime but sometimes with bad graphics in Chrome. There is just for a point of where it could be potential steps of improvements.

ai commented 2 years ago

128 will lead to too low resolution.

How 16 will work on your laptop?

vyadl commented 2 years ago

I tried again and now even 128 with Chrome doesn't ensure that it will be realtime render. but 16 is already really good in Firefox.

Safari is something in the middle - some lags but less than in Chrome.

ai commented 2 years ago

I checked 16. It is too low resolution to understand anything.

I think 8 should be max. If you have not enough resources it is better to disable real-time updates.