jquery - Chrome Rendering Shown content as missing -

this pretty annoying bug involves hiding , showing content mobile menu. i've tried many different approaches, hiding content, or alternately throwing content left: 400%, regardless of try when reload page, once menu icon clicked, menu "appears" according chrome (all classes set correctly) isn't displaying. happens maybe 1 out of 4 times here.

you'll have reload page , tap on green filter each time. can see how menu supposed work, vanishes on occasion. bug happening on chrome. works fine on ie, ff , safari. bootstrap site, see mobile menu, shrink browser down < 767px.

html:

    <div class="row row-offcanvas row-offcanvas-left">       <a id="filter-toggle" href="#" class="pull-left visible-xs">         <img src="/assets/custom/images/filter-icon.png"/>       </a>        <div class="col-xs-4 col-sm-4 sidebar-offcanvas" id="sidebar" ng-controller="resourcecategoryctrl">         <a id="menu-toggle" href="#" class="pull-right visible-xs hidden-xs">           <img src="/assets/custom/images/filter-icon.png"/>         </a>           <h2 class="filter-heading">categories</h2>          <div class="list-group">           <span data-toggle="offcanvas" class="visible-xs ng-cloak menu-shift"><a href="#" class="list-group-item resource-category rc-font" data-category-id="{{category.id}}" ng-repeat="category in categories" ng-click="togglecategory()">{{category.title}}</a></span>            <a href="#" class="list-group-item resource-category rc-font hidden-xs ng-cloak" data-category-id="{{category.id}}" ng-repeat="category in categories" ng-click="togglecategory()">{{category.title}}</a>         </div>       </div><!--/.sidebar-offcanvas-->        <div class="col-sm-6 col-sm-offset-2 col-md-7 col-md-offset-1" id="article" ng-controller="resourcectrl">         <h2 class="category-header font-category ng-cloak">{{category.title}}</h2>         <div ng-show="resourceloading" class="loading-gif">           <div class="loading"></div>         </div>          <div class="resource-p" ng-show="!resourceloading" ng-repeat="resource in resources">           <resource></resource>         </div>         <p ng-show="noresults" class="no-results ng-cloak">no results found.</p>          <div class="text-center" ng-show="totalitems > itemsperpage && !resourceloading">           <pagination max-size="maxsize" num-pages="numpages" total-items="totalitems" items-per-page="itemsperpage" ng-model="currentpage" ng-change="pagechanged()" boundary-links="false" rotate="true"></pagination>         </div>     </div><!-- .row -->     </div><!-- .container -->    <div class="push"></div> </section>  <footer class="footer bg-dark">      <div class="text-center">       <a href="tos.html" class="tos-title">terms of service</a>     </div> </footer> 

jquery:

$(document).ready(function () {   $('.filter-toggle').on('click', function () {     $('.row-offcanvas').toggleclass('active');     $('.sidebar-offcanvas').toggleclass('extend');     $('#article').toggleclass('hide');     $('footer').toggleclass('hide');     $('#menu-toggle').toggleclass('hidden-xs');     $('#filter-toggle').toggleclass('hidden-xs');    });   $('#menu-toggle').on('click', function () {     $('.sidebar-offcanvas').toggleclass('extend');     $('.row-offcanvas').toggleclass('active');     $('#menu-toggle').toggleclass('hidden-xs');     $('#filter-toggle').toggleclass('hidden-xs');     $('#article').toggleclass('hide');     $('footer').toggleclass('hide');   });   $('.menu-shift').on('click', function () {     $('.sidebar-offcanvas').toggleclass('extend');     $('.row-offcanvas').toggleclass('active');     $('#menu-toggle').toggleclass('hidden-xs');     $('#filter-toggle').toggleclass('hidden-xs');     $('#article').toggleclass('hide');     $('footer').toggleclass('hide');   }); }); 

css:

  .extend {     width: 100%;   }    .row-offcanvas-left {     left: 0;   }   .row-offcanvas-left.active {    left: 50%;  }