CSS3アニメーショングリッチエラーChromeとFirefoxの

Question

私はCSSとブートストラップと、このサイドバーのメニューを持っていますいくつかのグリッチを検出することができ、サイドバーはアニメーションで平滑化されません。

この悪影響やグリッチエラーは、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; 
    } 

私はこの問題を解決するにはどうすればよいですか？

Answer 1

コメントまたは（トグル時にbodyを重ねている）#sidebar-wrapperにbackground: rgba(0,0,0,.5);を削除：

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>