Fixed Safari control sidebar issue #377

build/less/control-sidebar.less

@@ -5,25 +5,21 @@
 //This is a hack to make the background visible while scrolling
 .control-sidebar-bg {
   position: fixed;
-  z-index: 900;
+  z-index: 1000;
-  top: 0;
-  right: 0;
   bottom: 0;  
-  width: @control-sidebar-width;
 }
 //Transitions
 .control-sidebar-bg,
 .control-sidebar {
-  .translate(@control-sidebar-width, 0);
+  top: 0;
-  .transition-transform(@transition-speed ease-in-out);
+  right: -@control-sidebar-width;
+  width: @control-sidebar-width;  
+  .transition(right @transition-speed ease-in-out);
 }
 //The sidebar
 .control-sidebar {  
   position: absolute;  
-  top: 0;
   padding-top: @navbar-height;  
-  right: 0;
-  width: @control-sidebar-width;
   z-index: 1010;
   //Fix position after header collapse
   @media (max-width: @screen-sm) {
@@ -37,7 +33,7 @@
   &.control-sidebar-open {
     &,
     + .control-sidebar-bg {
-      .translate(0, 0);
+      right: 0;      
     }
   }
 }
@@ -45,7 +41,7 @@
 .control-sidebar-open {  
   .control-sidebar-bg,
   .control-sidebar {
-    .translate(0,0);
+    right: 0;
   }
   @media(min-width: @screen-sm) {
     .content-wrapper,

build/less/core.less

@@ -23,7 +23,7 @@ body {
 .wrapper {
   .clearfix();
   min-height: 100%;
-  position: static;
+  position: relative;
   overflow: hidden!important;
   .layout-boxed & {
     max-width: 1250px;

build/less/sidebar-mini.less

@@ -30,6 +30,7 @@
           position: relative;
           > a {
             margin-right: 0;
+            overflow: hidden;
           }
           > a > span {
             border-top-right-radius: 4px;

dist/css/AdminLTE.css

@@ -29,7 +29,7 @@ body {
 /* Layout */
 .wrapper {
   min-height: 100%;
-  position: static;
+  position: relative;
   overflow: hidden!important;
 }
 .wrapper:before,
@@ -587,6 +587,7 @@ a:focus {
   }
   .sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
     margin-right: 0;
+    overflow: hidden;
   }
   .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
     border-top-right-radius: 4px;
@@ -668,29 +669,21 @@ a:focus {
  */
 .control-sidebar-bg {
   position: fixed;
-  z-index: 900;
+  z-index: 1000;
-  top: 0;
-  right: 0;
   bottom: 0;
-  width: 230px;
 }
 .control-sidebar-bg,
 .control-sidebar {
-  -webkit-transform: translate(230px, 0);
+  top: 0;
-  -ms-transform: translate(230px, 0);
+  right: -230px;
-  -o-transform: translate(230px, 0);
+  width: 230px;
-  transform: translate(230px, 0);
+  -webkit-transition: right 0.3s ease-in-out;
-  -webkit-transition: -webkit-transform 0.3s ease-in-out;
+  -o-transition: right 0.3s ease-in-out;
-  -moz-transition: -moz-transform 0.3s ease-in-out;
+  transition: right 0.3s ease-in-out;
-  -o-transition: -o-transform 0.3s ease-in-out;
-  transition: transform 0.3s ease-in-out;
 }
 .control-sidebar {
   position: absolute;
-  top: 0;
   padding-top: 50px;
-  right: 0;
-  width: 230px;
   z-index: 1010;
 }
 @media (max-width: 768px) {
@@ -703,17 +696,11 @@ a:focus {
 }
 .control-sidebar.control-sidebar-open,
 .control-sidebar.control-sidebar-open + .control-sidebar-bg {
-  -webkit-transform: translate(0, 0);
+  right: 0;
-  -ms-transform: translate(0, 0);
-  -o-transform: translate(0, 0);
-  transform: translate(0, 0);
 }
 .control-sidebar-open .control-sidebar-bg,
 .control-sidebar-open .control-sidebar {
-  -webkit-transform: translate(0, 0);
+  right: 0;
-  -ms-transform: translate(0, 0);
-  -o-transform: translate(0, 0);
-  transform: translate(0, 0);
 }
 @media (min-width: 768px) {
   .control-sidebar-open .content-wrapper,