search

gilbarbara / react-floater

Advanced tooltips for React
https://codesandbox.io/s/github/gilbarbara/react-floater/tree/main/demo
MIT License
220 stars 37 forks source link

Scrolling in Safari becomes very choppy when disableAnimation is false on many floaters #56

Closed quintmouthaan closed 2 years ago

quintmouthaan commented 5 years ago

🐛 Bug Report

I have about 40 components with a floater on each element that displays a tolltip when the user hovers over an element. The 40 components are in a scollable container and the user can scroll down and up. On Chrome the scrolling is very smooth, but on Safari the scrolling is very choppy. Disabling animation with disableAnimation=true on the Floater make scrolling on Safari smooth again.

To Reproduce

See above

Expected behavior

Smooth scrolling in Safari as it is in Chrome

Run npx envinfo --system --binaries --npmPackages react-floater

System: OS: macOS 10.14.5 CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz Memory: 75.25 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 11.2.0 - ~/.nvm/versions/node/v11.2.0/bin/node npm: 6.4.1 - ~/.nvm/versions/node/v11.2.0/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman npmPackages: react-floater: ^0.6.4 => 0.6.4

quintmouthaan commented 5 years ago

To add some more info: although disabling the animation did result in a somewhat better performance the scrolling was still a bit choppy, so I decided not to use the floater altogether. That resulted in a performance improvement in Chrome as well. I'm using infinite scroller to show more than the 40 components if the user scrolls down and in Chrome the items rendered very slowly when I scrolled to about 200th component. After removing the floater the components are rendered quickly again even when scrolling very far down the list.

I really love react-floater and will keep using it, but as long as it impacts performance this way I'll refrain from using it in a lot of components on one page.

Krystofee commented 4 years ago

I've also encountered this issue. We resolved it by rendering the floater component only when it has to be shown. Otherwise it's really laggy when you are scrolling.

ustun commented 3 years ago

Does setting eventDelay to 0 help? It seems to have helped for us in a long list.

gilbarbara commented 3 years ago

Please try react-floater@next

gilbarbara commented 2 years ago

Probably fixed in 0.8.0