Bug Type: Component
Environment
- Vue Version:
3.2.31 - Element Plus Version:
2.1.0 - Browser / OS:
Chrome/99.0.4844.51 / Mac OS X 10_15_7 - Build Tool:
Vue CLI
Reproduction
Related Component
el-menu
Reproduction Link
Element Plus Playground
Steps to reproduce
You can use the "Top bar" menu example from the component guide ( https://element-plus.org/en-US/component/menu.html ):
- Click on "Edit in Playground"-Button.
- Open the chrome dev console and resize the browser window (width) to approx. 734px.
At some point the menu will start flickering constantly.
Note: This bug exists for a very long time and is happening in every app i build since i started working with element-plus (started last year).
What is Expected?
Menu stops responding/adapting to new browser size once the window is not resized anymore.
What is actually happening?
Even if you stop resizing the window (at certain sizes) it seems the menu gets stuck in some "responsive" behaviour moving menu items in and out the "burger menu" and never stops flickering.
Additional comments
I don't get any console errors in my own applications. But if you reproduce this on the playground then it logs a few thousand times: "Uncaught TypeError: Cannot read properties of null (reading 'includes') ...".
Maybe this helps.
Site note: If you try to reproduce the bug you can also notice a second problem: if you slowly reduce the widow size then the menu regularly starts moving menu items in and out the burger/3dot menu seemingly in a broken logic. Example: In the playground example above you can reduce the browsers width to 740px and the "workspace" item gets moved into the menu. At 739px it gets moved out again, at 738px it again gets moved to the menu and so on ...
3条答案
按热度按时间8yparm6h1#
Did you find any solution?, I am facing the same problem.
e5njpo682#
Hello, I am facing similar issue.
Was hoping that 2.2.10 will fix this, but things are much worse now. #8616
2.2.10 crashes my browser tab if I try to resize the window with menu component.
But I created a workaround for 2.2.9. You can apply the following overflow css,
.el-menu { overflow: hidden; }.It will flicker only during resizing, but not when resizing is done. @Harshpanday
Hope that helps!
x4shl7ld3#
Did you find any solution?, I am facing the same problem.
No. There is no solution. The whole menu width calculation is messed up and imho needs to be refactored asap. There seem to be changes with some releases but in the end it is not only about the flickering but also about the calculation just not working the correct way. I sometimes get even truncated menus if there would be space for another 3 menu-items when i open the app. After scaling the window for 1 px it all sets in and seems to work until it does not for any other not apparent reason. The whole menu issue is leading me to consider removing element-plus from my project because this bugs combined with the partly non existent mobile support is really dragging this ui framework down.
And i really loved it in the beginning.