resolves #35. Remove GPU usage, add another positioning div to solve …

…double scroll bug in Chrome retina
rommguy · Mar 12, 2018 · 3ee8220 · 3ee8220
1 parent c0cc189
commit 3ee8220
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 17 deletions.
diff --git a/dist/customScroll.css b/dist/customScroll.css
@@ -2,9 +2,9 @@
   min-height: 0;
   min-width: 0; }
   .custom-scroll .outer-container {
-    overflow: hidden;
-    position: relative;
-    transform: translateZ(0); }
+    overflow: hidden; }
+    .custom-scroll .outer-container .positioning {
+      position: relative; }
     .custom-scroll .outer-container:hover .custom-scrollbar {
       opacity: 1;
       transition-duration: 0.2s; }

diff --git a/dist/reactCustomScroll.js b/dist/reactCustomScroll.js
diff --git a/example/example.js b/example/example.js
diff --git a/example/example.js.map b/example/example.js.map
diff --git a/example/styles.css b/example/styles.css
@@ -357,9 +357,9 @@ th {
   min-height: 0;
   min-width: 0; }
   .custom-scroll .outer-container {
-    overflow: hidden;
-    position: relative;
-    transform: translateZ(0); }
+    overflow: hidden; }
+    .custom-scroll .outer-container .positioning {
+      position: relative; }
     .custom-scroll .outer-container:hover .custom-scrollbar {
       opacity: 1;
       transition-duration: 0.2s; }

diff --git a/src/main/cs.scss b/src/main/cs.scss
@@ -6,8 +6,10 @@
 
   .outer-container {
     overflow: hidden;
-    position: relative;
-    transform: translateZ(0);
+
+    .positioning {
+      position: relative;
+    }
 
     &:hover .custom-scrollbar {
       opacity: 1;
@@ -19,7 +21,7 @@
     overflow-x: hidden;
     overflow-y: scroll;
 
-    &:after {
+    &:after{
       content: '';
       position: absolute;
       top: 0;

diff --git a/src/main/customScroll.css b/src/main/customScroll.css
@@ -2,9 +2,9 @@
   min-height: 0;
   min-width: 0; }
   .custom-scroll .outer-container {
-    overflow: hidden;
-    position: relative;
-    transform: translateZ(0); }
+    overflow: hidden; }
+    .custom-scroll .outer-container .positioning {
+      position: relative; }
     .custom-scroll .outer-container:hover .custom-scrollbar {
       opacity: 1;
       transition-duration: 0.2s; }

diff --git a/src/main/customScroll.js b/src/main/customScroll.js
@@ -346,7 +346,8 @@ class CustomScroll extends React.Component {
              style={this.getOuterContainerStyle()}
              onMouseDown={this.onMouseDown}
              onClick={this.onClick}>
-          {this.hasScroll && (
+          {this.hasScroll ? (
+            <div className="positioning">
               <div ref={this.setCustomScrollbarRef}
                    className={`custom-scrollbar${ this.props.rtl ? ' custom-scrollbar-rtl' : ''}`}
                    key="scrollbar">
@@ -355,7 +356,8 @@ class CustomScroll extends React.Component {
                      style={scrollHandleStyle}>
                   <div className={this.props.handleClass}></div>
                 </div>
-            </div>)}
+              </div>
+            </div>) : null}
           <div ref={this.setRefElement('innerContainer')}
                className={this.getInnerContainerClasses()}
                style={scrollStyles.innerContainer}