[components] Avoid repaint on scroll (#615)

sanity-io · Feb 27, 2018 · ca81321 · ca81321
1 parent f520138
commit ca81321
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 1 deletion.
diff --git a/packages/@sanity/components/src/selects/styles/SelectMenu.css b/packages/@sanity/components/src/selects/styles/SelectMenu.css
@@ -7,6 +7,7 @@
 }
 
 .scrollContainer {
+  transform: translateZ(0);
   position: absolute;
   top: 0;
   left: 0;

diff --git a/packages/@sanity/components/src/utilities/ScrollContainer.js b/packages/@sanity/components/src/utilities/ScrollContainer.js
@@ -10,6 +10,7 @@ export default class ScrollContainer extends React.PureComponent {
   }
 
   static defaultProps = {
+    className: '',
     onScroll: () => {}
   }
 
@@ -47,7 +48,7 @@ export default class ScrollContainer extends React.PureComponent {
     return (
       <div
         ref={this.setScrollContainerElement}
-        className={this.props.className || styles.scrollContainer}
+        className={`${styles.scrollContainer} ${this.props.className}`}
       >
         {this.props.children}
       </div>

diff --git a/packages/@sanity/components/src/utilities/styles/ScrollContainer.css b/packages/@sanity/components/src/utilities/styles/ScrollContainer.css
@@ -1,4 +1,5 @@
 .scrollContainer {
+  transform: translateZ(0);
   position: absolute;
   top: 0;
   left: 0;