title: Offcanvas - CSS transition bug on Android 4.1.x
body: <p>I'm trying to create a offcanvas menu similar to Google Plus app's one.</p>
  
  <p>Basically, I have a code working on almost all devices (android/ios) and browsers (ff, chrome, IE8+)</p>
  
  <p>The only problem I have is on a Samsung Galaxy Tab 3 running Android 4.1.2 : if I activate the opacity transition of the dark/opaque layer on the right, the offcanvas menu won't hide when closing the menu ... and it totally breaks my app.</p>
  
  <p>See this two fiddles on Android 4.1.2 :</p>
  
  <ul>
  <li><p>doesn't work : <a href="http://jsfiddle.net/F3BPw/3/" rel="nofollow">http://jsfiddle.net/F3BPw/3/</a></p></li>
  <li><p>works but I disabled to opacity transition (which I need) : <a href="http://jsfiddle.net/F3BPw/2/" rel="nofollow">http://jsfiddle.net/F3BPw/2/</a></p></li>
  </ul>
  
  <p>Related CSS code (SASS version here, CSS version on jsfiddle) :</p>
  
  <p>ps: see the two transitions lines commented , the bug appears If I decomment them</p>
  
  <pre><code>html, body {
      overflow-x: hidden;
      /*height: 100%;*/
  }
  
  .sidebar-offcanvas {
      height: 100%;
      position: absolute;
  }
  
  a[data-toggle=offcanvas]:focus {
      outline: none;
  }
  
  $global-site-min-height: 520px; /*TODO: replace this by better css or JS*/
  #sidebar {
      padding-left: 0;
      padding-right: 0;
      min-height: $global-site-min-height;
      background-color: lighten($gray-light, 30%);
  
      .left-sidebar {
          padding: 0 15px;
      }
  }
  
  #rightpanel {
      height: 100%;
      min-height: $global-site-min-height;
      padding-left: 0;
      padding-right: 0;
  }
  
  .wrapper {
      overflow: hidden;
  }
  
  .row-offcanvas {
      position: relative;
  }
  
  @media screen and (max-width: $screen-xs-max) {
  
      $sidebar-width: 40%;
  
      #togleSidebar {
          display: block;
      }
  
      .sidebar-offcanvas {
          @include transition(left 0.15s linear, opacity 0.15s linear);
          height: 100%;
          z-index: 9500;
          top: 0;
          width: $sidebar-width;
          left: -$sidebar-width;
      }
  
      #rightpanel-shadow {
          background: #000 !important;
          position: absolute;
          width: 100%;
          height: 100%;
          visibility: hidden;
          @include opacity(0);
          z-index: 9250;
          @include transition(opacity 0.15s linear); /* SECOND FIDDLE WORKS IF COMMENTED*/
      }
  
      .active {
          .sidebar-offcanvas {
              left: 0;
              @include box-shadow(6px 0px 6px -2px #111111);
              @include transition(left 0.15s linear, opacity 0.15s linear);
  
          }
  
          #rightpanel-shadow {
              visibility: visible;
              @include opacity(0.75);
              transition-delay: 0s;
              zoom: 1;
              @include transition(opacity 0.15s linear); /* SECOND FIDDLE WORKS IF COMMENTED*/
          }
      }
  }
  </code></pre>