Swipe sidebar menu doesn't work in chrome

Question

i did the menu from that template

https://www.jqueryscript.net/menu/Touch-Swipeable-Sidebar-Menu-with-jQuery-CSS3.html

but it work only in firefox/edge/safari(ios). and doesn't work in chrome/opera and other browsers

as i see in debug (F12) menu in chrome, after swipe js add "open-sidebar" class but menu didn't appear on the screen

what i did wrong?

$(window).ready(function(){
  $(".swipe-area").swipe({
              swipeStatus:function(event, phase, direction, distance, duration, fingers)
                  {
                      if (phase=="move" && direction =="right") {
                           $(".container").addClass("open-sidebar");
                           return false;
                      }
                      if (phase=="move" && direction =="left") {
                           $(".container").removeClass("open-sidebar");
                           return false;
                      }
                  }
          }); 
      });

@media screen and (min-width: 320px) and (max-width: 700px)
{
body,
html {
  height: 100%;
  margin: 0;
  overflow: auto;
  font-family: helvetica;
  font-weight: 100;
}
.container {
  padding-left:0px;
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  -webkit-transition: left 0.4s ease-in-out;
  -moz-transition: left 0.4s ease-in-out;
  -ms-transition: left 0.4s ease-in-out;
  -o-transition: left 0.4s ease-in-out;
  transition: left 0.4s ease-in-out;
}

.container{
  position:sticky;
}
.container.open-sidebar { left: 240px; }

.swipe-area {
  position: absolute;
  width: 50px;
  left: 0;
  top: 0;
  height: 100%;
  background: #f3f3f3;
  z-index: 0;
}

#sidebar::-webkit-scrollbar { 
  height: 0;
    width: 0;
  display: none;
}



#sidebar::-moz-scrollbar { 
  
  display: none;
}


#sidebar {
 
  overflow-y: auto;     
  /*background: #e0e0e0;*/
  position: absolute;
  width: 240px;
  height: 100%;
  left: -240px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}




#sidebar ul {
  margin: 0;
  padding: 0;
  list-style-type: square;
}

#sidebar ul li { margin: 0; }

#sidebar ul li a {
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 100;
  color: #333;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #C922;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  -ms-transition: background 0.3s ease-in-out;
  -o-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}


.main-content {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
 position: relative;
}

.main-content .content {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  overflow: auto;
  padding-left: 60px;
  width: 100%;
}

.main-content .content h1 { font-weight: 100; }

.main-content .content p {
  width: 100%;
  line-height: 160%;
}

.main-content #sidebar-toggle {
  background: orange;
  border-radius: 3px;
  display: block;
  position: relative;
  padding: 10px 7px;
  float: left;
}

.main-content #sidebar-toggle .bar {
  display: block;
  width: 18px;
  margin-bottom: 3px;
  height: 2px;
  background-color: #fff;
  border-radius: 1px;
}

.main-content #sidebar-toggle .bar:last-child { margin-bottom: 0; }

#sidebar-overlay {
  display: none;
  position: fixed;
  //background: #fff; 
  opacity: 0.1; 
  width: 100%;
  height: 100%;
  z-index: 0;
  top: 0;
  left: 0;
}
.ul_menu, #sidebar {
  margin: 0;
  padding: 0;
}
.sub-nav{
  display:none;
}
#sidebar .dropdown:hover { background: orange; }
#sidebar .dropdown .sub-nav {
  list-style: none;
  font-style: italic;
  background: #fff;
  margin: 0;
  padding: 0 20px;
}

#sidebar .dropdown .sub-nav li:not(:last-child) {
  border-bottom: 1px solid #efefef;
}
#sidebar .dropdown .sub-nav li a {
  text-decoration: none;
  color: black;
  font-size: 14px;
  display: block;
}
#sidebar .dropdown .sub-nav li a:hover { background: orange; }

#sidebar .dropdown .sub-nav li:first-child {
  padding-top:1px;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>

<div class="container">
    <div id="sidebar" class="topmenu" class="col-sm-12">
      <ul id="menu-line" >
        <li class="dropdown">
          <a href="#">Об  <span class="caret" ></span></a>	
          <ul class="sub-nav" class="col-sm-12">
            <li><a href="#"></a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="main-content">
      <div class="swipe-area"></div>
      <div class="content">
      <h1><===swipe here.</h1>
  <h1>... Main Content ...</h1>
      </div>
    </div>

By the way, when i was forming my snippet for i've found my mistake.

.container{
  position:sticky;
}

I don't know why that works in firefox/edge/safari and pre-installed browser on my few android phones.

Answer 1

Use transfrom:

$(window).ready(function(){
  $(".swipe-area").swipe({
              swipeStatus:function(event, phase, direction, distance, duration, fingers)
                  {
                      if (phase=="move" && direction =="right") {
                           $(".container").addClass("open-sidebar");
                           return false;
                      }
                      if (phase=="move" && direction =="left") {
                           $(".container").removeClass("open-sidebar");
                           return false;
                      }
                  }
          }); 
      });

@media screen and (min-width: 320px) and (max-width: 700px)
{
body,
html {
  height: 100%;
  margin: 0;
  overflow: auto;
  font-family: helvetica;
  font-weight: 100;
}
.container {
  padding-left:0px;
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  -webkit-transition: transform 0.4s ease-in-out;
  -moz-transition: transform 0.4s ease-in-out;
  -ms-transition: transform 0.4s ease-in-out;
  -o-transition: transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
}

.container{
  position:sticky;
}
.container.open-sidebar { transform: translate(240px, 0); }

.swipe-area {
  position: absolute;
  width: 50px;
  left: 0;
  top: 0;
  height: 100%;
  background: #f3f3f3;
  z-index: 0;
}

#sidebar::-webkit-scrollbar { 
  height: 0;
    width: 0;
  display: none;
}



#sidebar::-moz-scrollbar { 
  
  display: none;
}


#sidebar {
 
  overflow-y: auto;     
  /*background: #e0e0e0;*/
  position: absolute;
  width: 240px;
  height: 100%;
  left: -240px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}




#sidebar ul {
  margin: 0;
  padding: 0;
  list-style-type: square;
}

#sidebar ul li { margin: 0; }

#sidebar ul li a {
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 100;
  color: #333;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #C922;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  -ms-transition: background 0.3s ease-in-out;
  -o-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}


.main-content {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
 position: relative;
}

.main-content .content {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  overflow: auto;
  padding-left: 60px;
  width: 100%;
}

.main-content .content h1 { font-weight: 100; }

.main-content .content p {
  width: 100%;
  line-height: 160%;
}

.main-content #sidebar-toggle {
  background: orange;
  border-radius: 3px;
  display: block;
  position: relative;
  padding: 10px 7px;
  float: left;
}

.main-content #sidebar-toggle .bar {
  display: block;
  width: 18px;
  margin-bottom: 3px;
  height: 2px;
  background-color: #fff;
  border-radius: 1px;
}

.main-content #sidebar-toggle .bar:last-child { margin-bottom: 0; }

#sidebar-overlay {
  display: none;
  position: fixed;
  //background: #fff; 
  opacity: 0.1; 
  width: 100%;
  height: 100%;
  z-index: 0;
  top: 0;
  left: 0;
}
.ul_menu, #sidebar {
  margin: 0;
  padding: 0;
}
.sub-nav{
  display:none;
}
#sidebar .dropdown:hover { background: orange; }
#sidebar .dropdown .sub-nav {
  list-style: none;
  font-style: italic;
  background: #fff;
  margin: 0;
  padding: 0 20px;
}

#sidebar .dropdown .sub-nav li:not(:last-child) {
  border-bottom: 1px solid #efefef;
}
#sidebar .dropdown .sub-nav li a {
  text-decoration: none;
  color: black;
  font-size: 14px;
  display: block;
}
#sidebar .dropdown .sub-nav li a:hover { background: orange; }

#sidebar .dropdown .sub-nav li:first-child {
  padding-top:1px;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>

<div class="container">
    <div id="sidebar" class="topmenu" class="col-sm-12">
      <ul id="menu-line" >
        <li class="dropdown">
          <a href="#">Об  <span class="caret" ></span></a>	
          <ul class="sub-nav" class="col-sm-12">
            <li><a href="#"></a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="main-content">
      <div class="swipe-area"></div>
      <div class="content">
      <h1><===swipe here.</h1>
  <h1>... Main Content ...</h1>
      </div>
    </div>