Css3 animation glitch error Chrome and Firefox

Question

I have this sidebar menu with css and bootstrap: (please reduce size of the iframe to see the menu button)

http://jsfiddle.net/s8hts3v7/11/

If you toggle the sidebar menu you can detect some glitch and the sidebar is not smoothing in the animation.

This bad effect or glitch error it is even more detectable with Firefox.

The classes that I used for this menu are:

/*sidebar nav*/
.navbar-toggle {
    background: #CFD8DC;
    color: #666;
}
.navbar-toggle .icon-bar {
    background: #666;
    width: 17px;
    height: 3px;
}
#sidebar-wrapper {
    background: rgba(0,0,0,.5);
    bottom: 0;
    z-index: 500;
    -webkit-transition-property: background,top,right,bottom,left;
    transition-property: background,top,right,bottom,left;
    -webkit-transition-duration: .5s,0,0,0,0;
    transition-duration: .5s,0,0,0,0;
    -webkit-transition-delay: 0;
    transition-delay: 0;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}
#sidebar-wrapper.active {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
#sidebar-menu {
    margin-left: -250px;
    left: 0;
    width: 250px;
    background: #f5f5f5;
    position: fixed;
    height: 100%;
    overflow-y: auto;
    z-index: 1000;
    transition: all 0.5s ease-in 0s;
    -webkit-transition: all 0.5s ease-in 0s;
    -moz-transition: all 0.5s ease-in 0s;
    -ms-transition: all 0.5s ease-in 0s;
    -o-transition: all 0.5s ease-in 0s;
  }

  .sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sidebar-nav li {
    line-height: 50px;
    text-indent: 20px;
  }

  .sidebar-nav li a {
    color: #999999;
    display: block;
    text-decoration: none;
  }

  .sidebar-nav li a:hover {
    color: #fff;
    background: rgba(255,255,255,0.2);
    text-decoration: none;
  }

  .sidebar-nav li a:active, .sidebar-nav li a:focus {
    text-decoration: none;
  }

  .sidebar-nav > .sidebar-brand {
    height: 55px;
    line-height: 55px;
    font-size: 18px;
    background: white;
    text-indent: initial;
    padding-left: 12px;
  }
  .sidebar-brand img {
    width: 134px;
  }
  .sidebar-brand #menu-close {
    font-size: 26px;
    font-weight: 200;
    display: inline-block;
    vertical-align: middle;
    color: #9E9E9E;
    cursor: pointer;
  }
  .sidebar-nav > .sidebar-brand a {
    color: #999999;
    display: inline-block;
  }

  .sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
  }

  #sidebar-wrapper.active #sidebar-menu {
    left: 250px;
    width: 250px;
    transition: all 0.5s ease-out 0s;
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
  }

  .toggle {
    margin: 5px 5px 0 0;
  }

How can i fix this?

Answer 1

Comment or remove background: rgba(0,0,0,.5); on #sidebar-wrapper (it is overlaying body when toggled):

Link to your JSFiddle

Firefox:

Chrome:

$(document).ready(function() {
  $("#menu-close").click(function(e) {
    e.preventDefault();
    $("#sidebar-wrapper").toggleClass("active");
  });
  $("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#sidebar-wrapper").toggleClass("active");
  });
});

html {
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #737373;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  background: #E9E9E9 !important;
}

/*sidebar nav*/

.navbar-toggle {
  background: #CFD8DC !important;
  color: #666 !important;
}

.navbar-toggle .icon-bar {
  background: #666 !important;
  width: 17px !important;
  height: 3px !important;
}

#sidebar-wrapper {
  /* background: rgba(0,0,0,.5); */
  bottom: 0;
  z-index: 500;
  -webkit-transition-property: background, top, right, bottom, left;
  transition-property: background, top, right, bottom, left;
  -webkit-transition-duration: .5s, 0, 0, 0, 0;
  transition-duration: .5s, 0, 0, 0, 0;
  -webkit-transition-delay: 0;
  transition-delay: 0;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}

#sidebar-wrapper.active {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

#sidebar-menu {
  margin-left: -250px;
  left: 0;
  width: 250px;
  background: #f5f5f5;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.5s ease-in 0s;
  -webkit-transition: all 0.5s ease-in 0s;
  -moz-transition: all 0.5s ease-in 0s;
  -ms-transition: all 0.5s ease-in 0s;
  -o-transition: all 0.5s ease-in 0s;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav li {
  line-height: 50px;
  text-indent: 20px;
}

.sidebar-nav li a {
  color: #999999;
  display: block;
  text-decoration: none;
}

.sidebar-nav li a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  text-decoration: none;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav>.sidebar-brand {
  height: 55px;
  line-height: 55px;
  font-size: 18px;
  background: white;
  text-indent: initial;
  padding-left: 12px;
}

.sidebar-brand img {
  width: 134px;
}

.sidebar-brand #menu-close {
  font-size: 26px;
  font-weight: 200;
  display: inline-block;
  vertical-align: middle;
  color: #9E9E9E;
  cursor: pointer;
}

.sidebar-nav>.sidebar-brand a {
  color: #999999;
  display: inline-block;
}

.sidebar-nav>.sidebar-brand a:hover {
  color: #fff;
  background: none;
}

#sidebar-wrapper.active #sidebar-menu {
  left: 250px;
  width: 250px;
  transition: all 0.5s ease-out 0s;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
}

.toggle {
  margin: 5px 5px 0 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body id="fotieditor">
  <div class="container-fluid">
    <button id="menu-toggle" type="button" class="navbar-toggle toggle pull-left" data-toggle="collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    <div id="sidebar-wrapper">
      <div id="sidebar-menu">
        <ul class="sidebar-nav">
          <li class="sidebar-brand">
            <i id="menu-close" class="fa fa-times-circle-o"></i>
            <a href="#"><img src="https://rp-static.com/www_mantaspersonalizadas/svg/mantas-personalizadas.svg" alt=""></a>
          </li>
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#about">About</a>
          </li>
          <li>
            <a href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>

  </div>
</body>