为什么这适用于Safari和Firefox，而不是Chrome

我有一个响应式导航菜单，它的工作原理如下：当您调整窗口大小时，"汉堡包"（三行）会出现一个图标。单击此图标将显示菜单，并且该图标通过变换变为"X"图标。单击"X"使菜单消失，图标再次变为三行。

它在Safari和Firefox中完美运行，但在Chrome中则不然。它将三行转换为"X"和viceversa，但菜单从未出现。为什么？

代码如下：

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

非常感谢您的帮助！

PS：如果你能告诉我一个更好的方法来做这个响应式菜单，我将不胜感激！谢谢！:)