CSS-3 Transform bug, menu appearing stuck

Question

I am using this plugin called transit.js to create a simple menu animation and basically I have the following menu, see below:

The code for the open and close of the menu is as follows:

$('.main-header .nav-toggle-button').on('click' , function() {

    // $('.main-header .navigation').toggleClass('show');

    if ($('.main-header .navigation').hasClass('show'))  {
        $('.main-header .navigation').stop().removeClass('show');
        return false;
    }

    $('.main-header .navigation').stop().transition({
          perspective: '1000px',
          rotateY: '180deg',
          duration : 0
        }, function() {
          $(this).addClass('show').stop().transition({ rotateY: '0' });
        });

    return false;

}); 

DEMO HERE, (I am sorry, the fiddle just doesn't recreate this issue.)

BUG: As you can see on close there is no animation, the menu goes away, now this bug occurs when the page is scrolled more than 200px+ and below 992px width, so basically when you click on the hamburger, the menu opens with a rotate animation but when you click the hamburger again the menu sometimes doesn't close even though the 'show' class has been removed form the menu.

This is one of these bugs that is just beyond me, inspecting in the console and going through the JS code has just not really helped.

I would really appreciate if anyone can point out what I am doing wrong here, as the JS and CSS really seems to be perfect but the css transforms using transit is just not working as expected.

Answer 1

As already mentioned seems to be a Chrome bug, I tried editing the CSS on your demo and this solution seems to work ... try adding a "z-index" to -1 here:

@media (max-width: 992px)
.navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    background: rgba(255,255,255,.95);
    z-index: -1; // ADD THIS
}

Answer 2

An alternate solution to your problem..

The problem I found is, on smaller screens, your mini-menu appears on-click of hamburger icon. But it doesn't disappear when clicked on hamburger icon again.

However, it disappears immediately if you scroll the window. So, I added two lines inside the if statement which actually scrolls the window 1px down and then 1px up (to keep the position of the document same). Add the following code inside your if statement (before return false; line).

window.scrollBy(0, 1);
window.scrollBy(0, -1);

Answer 3

I think that your mistake is that you re using the hover event to add and remove the animation, he just fire once that your mouse is over the element:

/* dropdown */

    $('.navigation .dropdown-menu-item').hover(function() {

      $('.navigation .dropdown-menu-item').find('.dropdown-menu-list').removeClass('opened');

      $(this).find('.dropdown-menu-list').stop().transition({ 'y' : '20px' , duration: 0 } , function() {
        $(this).addClass('opened').stop().transition({ 'y': 0 });
      });

      return false;

    }, function() {

      $(this).find('.dropdown-menu-list').removeClass('opened');

    });

Use mouseenter and mouseleave events to add and remove the dropdown list animation, by this way you gonna have the events fired at over and leave:

$(document).on('.navigation .dropdown-menu-item', 'mouseenter', function(){
  $('.navigation .dropdown-menu-item').find('.dropdown-menu-list').removeClass('opened');
  $(this).find('.dropdown-menu-list').stop().transition({ 'y' : '20px' , duration: 0 } , function() {
    $(this).addClass('opened').stop().transition({ 'y': 0 });
  });
  return false;
})

$(document).on('.navigation .dropdown-menu-item', 'mouseleave', function(){
  $(this).find('.dropdown-menu-list').removeClass('opened');
})

Answer 4

Here is css solution... with this your menu will open and close smoothly

add following css to your code and over-wright

     @media(max-width:991px) {
        .navigation {
            transition: all 0.4s;
            -webkit-transition: all 0.4s;
            display: block;
            transform: rotateY(90deg) !important;
            -webkit-transform: rotateY(90deg) !important;
            perspective: 1000px !important;
            -webkit-perspective: 1000px !important;
            opacity: 0;
            visibility: hidden;
        }
        .navigation.show {
            display: block;
            opacity: 1;
            transform: rotateY(0deg) !important;
            -webkit-transform: rotateY(0deg) !important;
            visibility: visible;
        }
    }

ENJOY...