search

KingSora / OverlayScrollbars

A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel.
https://kingsora.github.io/OverlayScrollbars
MIT License
3.9k stars 215 forks source link

style recalculations on resize regression between `2.7.3` and `2.8.0` #643

Closed tryggvigy closed 6 months ago

tryggvigy commented 6 months ago

Describe the bug Hey there! We noticed after bumping from 2.7.3 to 2.8.0 there was a big drop in window resizing performance.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://kingsora.github.io/OverlayScrollbars/example/react/
  2. Resize the window
  3. Notice data-overlayscrollbars-viewport is written to the same value in the DOM on every resize event.

https://github.com/KingSora/OverlayScrollbars/assets/2373958/abbfcea7-e38c-4426-93b4-231e2aa7214a

At least I think this is the issue! As a result I believe the browser has to do style recalculations again each resize as this data attribute is used in CSS:

image image

As we have quite a complex app with lots of css and dom nodes, the browsers "Recalculate Styles" block is quite expensive and lots of frames are dropped during resize of the window. In the end we decided to roll back to 2.7.3.

I wonder if skipping writing the data-overlayscrollbars-viewport to the DOM if it did not change would help resize performance.

I'm going to look into this a bit but posting the issue here first in case someone has a hunch of what could be causing this issue.

tryggvigy commented 6 months ago

Unfortunately getting some build error when trying to spin up the react example locally so I'm not able to try things out at the moment

image
KingSora commented 6 months ago

@tryggvigy I'm looking into it! - So whats happening here is that on resizing the window I'm checking whether I need to update initialized OverlayScrollbar instances. For this I'm measuring the viewport element of the instance, but before I can measure it reliably I have to apply an style to make the measurement "correct" (because of certain browser behaviors).

This logic did not change between v2.7.3 and v2.8.0 though.. So I'm not 100% certain what could be the reason here.

KingSora commented 6 months ago

@tryggvigy to spin up the example try to run npm run example:react from the root directory of the repo.. the command should handle everything for you

KingSora commented 6 months ago

@tryggvigy I believe I've found the issue(s). Is there a possibility we could test this together / have a better communication channel (e.g. Slack, Discord, ...) than this issue thread? Then I could pass you the builds and you could test them

tryggvigy commented 6 months ago

Amazing! Yes, I'd be happy to. I can do discord. I'll reach out when I'm back from lunch here :)

tryggvigy commented 6 months ago

I've emailed you my Discord!

KingSora commented 6 months ago

I've added you :)

xmsz-stu commented 6 months ago

same. when to fix

tryggvigy commented 6 months ago

We are working on it @xmsz-stu 👍 should be quite soon

KingSora commented 6 months ago

@tryggvigy @xmsz-stu I've published v2.8.3 which includes the needed performance improvements.. Additionally I've added performance metrics which will hopefully help in catching such regressions in the future :)