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.

@MarcosPérezGude put chrome in "mobile mode" and you'll get the faulty hamburger. — poudigne, Apr 20 '16 at 11:52
you assume that I use chrome :), but OK, I see now (reducing the window size) — Marcos Pérez Gude, Apr 20 '16 at 12:01
It seems to be a Chrome bug. Once the menu is closed, only disappears if you click outside the browser, when it loses focus. Really strange. — Baro, Apr 20 '16 at 12:29
yes guys thanks for ur overwhelming response , its a chrome and opera bug ! thats right FF works fine :D — Alexander Solonik, Apr 20 '16 at 12:43
@AlexanderSolonik Have you tried my workaround ? The answer below ? — Baro, Apr 20 '16 at 13:21
@PLAudet you're wrong, but I assume that google make disasters in all brains. `If it's making by google, it's fine`. But this affirmation is wrong. However, you can think what you want. I listen before craps like `every dev make code in Java`, or `PHP developers are not developers`. But with this kind of thinking, it's normal the world we have: bugs and incompatibilities everywhere. Good luck. — Marcos Pérez Gude, Apr 20 '16 at 13:28
@PLAudet and see: every dev use chrome. The buggie chrome `:)`. Holy crap. — Marcos Pérez Gude, Apr 20 '16 at 13:29
I think the same. I don't undestand your joke at first reading, sorry. I'm laughing right now :). And yeah, I hear before things like that (the real developers are java developers, and this kind of foolness). See you soon :) — Marcos Pérez Gude, Apr 20 '16 at 14:21

score 9 · Accepted Answer · answered Apr 20 '16 at 12:34

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
}

Sajib Biswas · Answer 2 · 2016-04-24T06:23:33.083

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);

Marvin Medeiros · Answer 3 · 2016-04-20T12:04:06.340

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');
})

He ll just fire once, when you actually needs to fire when your mouse enter over the object and also when he leaves — Marvin Medeiros, Apr 20 '16 at 12:00
Read the doc about hover, you can specify 2 function, when you enter, when you leave. http://stackoverflow.com/questions/17589420/when-to-choose-mouseover-and-hover-function — poudigne, Apr 20 '16 at 12:01

score 2 · Answer 4 · answered Apr 26 '16 at 06:43

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...

CSS-3 Transform bug, menu appearing stuck

4 Answers4