I use slideToggle in a drop-down submenu. It opens smoothly, but almost at the very end of the animation there is a jerk. I tried to google it and fix it - first I found a problem with the fact that the animation can jerk because of padding and margin indents. Removed them, moved submenu items to height and line-height. The animation became smoother, but the jerk remained. Then I gobbled that the problem is related to the adaptive width (% instead of px). I also tried to solve this problem by calculating the width of the browser window and assigning a fixed width through .css (). And it did not help either. How to solve the jerk problem?

  • Please add the code as you did, or fill it with codepen.io - Lieutenant Jim Dangle
  • @FrankSinatra Filling a large piece of code is not very convenient. Open the link and zoom the page until the mobile version appears. In the mobile version, open the menu, and inside it a submenu (any menu item). There will be a jerk. - JamesJGoodwin pm
  • Try to give menu.slideToggle (400); - Lieutenant Jim Dangle
  • @FrankSinatra is the same. Nothing changed. - JamesJGoodwin
  • .dropdown-list {position: absolute; visibility: hidden; z-index: -1; opacity: 0; top: 80px; width: 200px; background: transparent; padding-top: 20px; transform: translateY (-1em); / * transition: all 0.3s ease-out 0s, visibility 0s linear 0.1s, z-index 0s linear 0.01s; * /} Remove This Transition - Lieutenant Jim Dangle

1 answer 1

ul.menu-item-list li .dropdown-list{ position: relative; display: none; background: #eeeeee; top: 0; z-index: 1; visibility: visible; padding-top: 0; opacity: 1; width: 100%; transform: translateY(0em); transition: none; }

On the mobile version, add and everything will be good