Hey there! This is such a common pain point with mobile side menus—let's dig into why this is happening and the best ways to fix it.

Why the Conflict Happens #

When you apply overflow:hidden to a container (like your body or a wrapper), the browser recalculates the layout immediately. If your menu is transitioning from off-screen to on-screen (or vice versa), the browser might skip the transition entirely because it sees the final state (menu hidden) and doesn't bother animating the intermediate steps. This is especially true if you're using position properties like left or top to move the menu—those trigger full layout reflows, which clash with overflow:hidden.

Optimal Solution: Use transform for Menu Positioning #

The best fix is to ditch positional properties (like left: -100%) and use CSS transform instead. Transforms run on the browser's compositor layer, so they don't trigger layout reflows—meaning they play nicely with overflow:hidden without breaking the animation.

Here's a quick example:

CSS

/* Container can have overflow:hidden permanently */
body {
  overflow: hidden;
  margin: 0;
}

/* Menu starts off-screen */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  background: #fff;
  /* Start off-screen to the right */
  transform: translateX(100%);
  /* Smooth transition */
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);
}

/* Active class brings menu into view */
.mobile-menu.active {
  transform: translateX(0);
}

JavaScript (for toggle logic)

const menuBtn = document.querySelector('.menu-btn');
const mobileMenu = document.querySelector('.mobile-menu');

menuBtn.addEventListener('click', () => {
  mobileMenu.classList.toggle('active');
  // No need to toggle overflow:hidden here—body keeps it permanently!
});

This approach is performant, requires minimal JS, and works across all modern mobile browsers.

Alternative Fix: Delay overflow:hidden with JavaScript #

If you can't switch to transform (for legacy reasons), you can use JS to delay setting overflow:hidden until after the transition starts, and remove it before the transition ends.

Example Code:

const menuBtn = document.querySelector('.menu-btn');
const mobileMenu = document.querySelector('.mobile-menu');
const body = document.body;

// Listen for transition end to clean up
mobileMenu.addEventListener('transitionend', () => {
  if (!mobileMenu.classList.contains('active')) {
    // Remove overflow after menu is hidden
    body.style.overflow = '';
  }
});

menuBtn.addEventListener('click', () => {
  const isActive = mobileMenu.classList.contains('active');
  
  if (isActive) {
    // Remove overflow first before hiding menu
    body.style.overflow = '';
    mobileMenu.classList.remove('active');
  } else {
    // Show menu first, then set overflow after a tiny delay
    mobileMenu.classList.add('active');
    setTimeout(() => {
      body.style.overflow = 'hidden';
    }, 10); // 10ms gives the browser time to start the transition
  }
});

This works, but it's less clean than the transform method—you have to handle timing and transition events, which can get messy if you have multiple animations.

Quick Win: Add will-change to the Menu #

If you're already using transform but still seeing issues, adding will-change: transform to your menu tells the browser to optimize that element for animation, which can prevent overflow:hidden from interfering:

.mobile-menu {
  will-change: transform;
  /* Rest of your styles */
}

This is a small tweak that can help with edge cases on older mobile browsers.

Final Recommendation #

Stick with the transform method—it's the most reliable, performant, and clean solution. It avoids all the layout reflow issues that cause transitions to break with overflow:hidden, and you don't need any hacky JS workarounds.

内容的提问来源于stack exchange，提问作者markeesmith