Why is this working on Safari and Firefox but not on Chrome?

Question

I have a responsive navigation menu, it works as follows: when you resize the window the 'hamburger' (three lines) an icon appears. Clicking this icon makes the menu appear and the icon becomes an 'X' icon by transforming. Clicking the 'X' makes the menu disappear and the icon become three lines again.

It works perfectly in Safari and Firefox, however it doesn't in Chrome. It makes the transformation of three lines to 'X' and viceversa but the menu never appears. Why is that?

Here's the code:

HTML:

    <nav>
        <label for="show-menu" class="show-menu">
            <button class="show-menu button-toggle-navigation">
                <span>Toggle Navigation</span>
            </button>
        </label>
        <input type="checkbox" id="show-menu" role="button">
        <ul>
            <li><a href="about.html">Conóceme</a></li>
            <li><a href="servicios.html">Servicios</a></li>
            <li><a href="port.html">Portfolio</a></li>
            <li><a href="contacto.html">Contacto</a></li>
        </ul>
    </nav>

    [...]        

    <script type="text/javascript">
        $('button').on('click', function() {
            $(this).toggleClass('isActive');
        });
    </script>

CSS:

     /*Style 'show menu' label button and hide it by default*/
 .show-menu {
   float: right;
   width: 0;
   height: 0;
   text-align: right;
   display: none;
   margin-right: 15%;
 }

 /*Hide checkbox*/
   input[type=checkbox]{
     display: none;
   }

/*Show menu when invisible checkbox is checked*/
   input[type=checkbox]:checked ~ ul{
      border-top-color: black;
      float: right;
      text-align: center;
      display: block;
      padding-top: 15%;
   }

   .button-toggle-navigation {
       background-color: transparent;
       border: 0;
       border-bottom: 0.25em solid black;
       border-top: 0.25em solid black;
       font-size: 13px;
       cursor: pointer;
       height: 1.5em;
       margin: .75em .375em;
       outline: 0;
       position: relative;
       -webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;
        transition: border-color 150ms ease-out, transform 150ms ease-out;
       width: 2.25em;
    }

    .button-toggle-navigation::after, .button-toggle-navigation::before {
        border-bottom: 0.25em solid black;
        bottom: .375em;
        content: '';
        height: 0;
        left: 0;
        position: absolute;
        right: 0;
        -webkit-transition: -webkit-transform 200ms ease-out;
          transition: transform 200ms ease-out;
     }

 .button-toggle-navigation span {
    color: transparent;
    height: 0;
    width: 0;
    overflow: hidden;
    position: absolute;
  }

  .isActive {
     border-color: transparent;
     -webkit-transform: rotateZ(90deg);
      transform: rotateZ(90deg);
   }

   .isActive::after, .isActive::before {
      -webkit-transition: -webkit-transform 200ms ease-out;
      transition: transform 200ms ease-out;
   }

   .isActive::after {
      -webkit-transform: rotateZ(45deg);
      transform: rotateZ(45deg);
   }

   .isActive::before {
      -webkit-transform: rotateZ(-45deg);
      transform: rotateZ(-45deg);
   }

Thanks a lot for your help!

PS: If you could tell me a better way to do this responsive menu, I'd appreciate it! Thanks! :)

Answer 1

Sure!

This is how I solved the problem:

HTML

        <nav>
        <label for="show-menu"xs class="show-menu">
            <button id="pull" class="show-menu button-toggle-navigation"></button>
        </label>
        <ul>
            <li><a href="about.html">Conóceme</a></li>
            <li><a href="servicios.html">Servicios</a></li>
            <li><a href="port.html">Portfolio</a></li>
            <li><a href="contacto.html">Contacto</a></li>
        </ul>
    </nav>

JS

    <script type="text/javascript">
    var menu = $("nav ul");

    $('#pull').on('click', function() {
      $(this).toggleClass('isActive');
      menu.slideToggle(200);
    });
</script>

CSS

/*Style 'show menu' label button and hide it by default*/
 .show-menu {
   margin-top: 7%;
   float: right;
   display: block;
}

 .button-toggle-navigation {
     background-color: transparent;
     border: 0;
     border-bottom: 0.16em solid black;
      border-top: 0.16em solid black;
      font-size: 1em;
     cursor: pointer;
      height: 1.2em;
      margin: .75em .375em;
      outline: 0;
      position: relative;
       -webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;
        transition: border-color 150ms ease-out, transform 150ms ease-out;
       width: 2.25em;
      }
       .button-toggle-navigation::after, .button-toggle-navigation::before {
          border-bottom: 0.16em solid black;
          bottom: .375em;
           content: '';
          height: 0;
          left: 0;
          position: absolute;
          right: 0;
          -webkit-transition: -webkit-transform 200ms ease-out;
           transition: transform 200ms ease-out;
         }


         .isActive {
             border-color: transparent;
             -webkit-transform: rotateZ(90deg);
             transform: rotateZ(90deg);
          }
          .isActive::after, .isActive::before {
              -webkit-transition: -webkit-transform 200ms ease-out;
               transition: transform 200ms ease-out;
           }
           .isActive::after {
               -webkit-transform: rotateZ(45deg);
               transform: rotateZ(45deg);
           }
           .isActive::before {
               -webkit-transform: rotateZ(-45deg);
               transform: rotateZ(-45deg);
            }

Answer 2

if you non't hide your button with CSS, the code is working perfectly:

.show-menu {
   float: right;
   text-align: right;
   margin-right: 15%;
 }

http://jsfiddle.net/4towu13r/

better if you use the -webkit- , -moz , -o- transition prefixes to.

UPDATE:

explanation: somehow chrome unable to activate <button> inside the <label> , if you click only on <label> the checkbox is checked and do the job. Here is a jQuery workaround to do the job:

        checkbox=$('input[role=button]');
        checkbox.prop('checked', !checkbox.prop('checked'));

working code: http://jsfiddle.net/eapo/4towu13r/3/