Performance issue using <Menu /> when scrolling
See original GitHub issueBug report
Describe the bug
When closed, <MenuList/>
re-calculates its position on scroll. This greatly impacts performance when lots of <Menu />
components are rendered at once. This scenario is common when rendering tables/lists where each item has associated options. The isLazy
prop, mentioned here, helps but doesn’t solve the issue.
Minimal reproduction
- https://codesandbox.io/s/chakra-uireact100-menu-perf-dejjg?file=/src/index.tsx
- enable “Highlight updates when components render.” in React DevTools
- scroll right pane
Expected behavior
When scrolling, <MenuList />
should only re-calculate its position if it is open.
Screenshots
![Screen Shot 2020-11-16 at 10 08 18](https://user-images.githubusercontent.com/7855/99290876-c9234480-27f3-11eb-97f8-5e9b4e2d441c.png)
System information
- OS: macOS
- Browser (if applies): Chrome, Safari
- Version of @chakra-ui/react: 1.0.0, 1.0.1
Issue Analytics
- State:
- Created 3 years ago
- Reactions:11
- Comments:8 (3 by maintainers)
Top Results From Across the Web
Windows search fields and menus scrolling on their own.
Hello community. Recently windows search fields and menus have started to scroll with no physical input from myself.
Read more >Windows Start Menu Scrolling Up: 5 Easy Fixes to Use
A faulty mouse driver is another well-known cause of the Windows Start Menu scrolling up issue. This is especially true for an external...
Read more >Fix scrolling performance with CSS will-change property
I recently saw Paul Lewis' screencast demonstrating how trivial it can be to fix a particular kind of performance issue caused by scrolling....
Read more >When scrolling/mouse over items in drop down menus, lines ...
When scrolling/mouse over items in browser drop down menus, lines are added between. Also in right click window. Really distracting.
Read more >The 3 Golden Rules of Sticky Menu Navigation - Contentsquare
The topic of sticky headers and sticky menu navigation is muddled in ... on pages with lots of content that require visitors to...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@with-heart I’m actually also having this, except the issue for me is a lot more pernicious. I get the following warning whenever I scroll or resize my window:
As you can imagine, receiving thousands of messages in less than a second crashes my window, thus making the
<Menu>
component, or the<Popover>
component, completely unusable to me.We still have this issue (the exact same behaviour as described by @prayogoa) with the latest version of the chakra-ui packages.
when scrolling, everything that uses popper listens to scroll events, and checks its own position all the time. only adding the modifier as described by @prayogoa helps.
i suggest chakra cloud by default disable the scroll-eventlistener if
enabled = false
, or something like that