javascript - CSS3动画故障错误Chrome和Firefox

我有带有CSS和Bootstrap的侧边栏菜单：
（请减小iframe的尺寸以查看菜单按钮）

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

如果切换侧边栏菜单，则可以检测到一些毛刺，并且侧边栏在动画中不平滑。

这种不良影响或故障错误在Firefox中甚至更容易检测到。

我用于此菜单的类是：

/*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;
  }

我怎样才能解决这个问题？

最佳答案

注释或删除background: rgba(0,0,0,.5);上的#sidebar-wrapper（在切换时它会覆盖body）：

Link to your JSFiddle



Firefox：



铬：

$(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>

关于javascript - CSS3动画故障错误Chrome和Firefox，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42763308/