Use hardware-accelerated translate3d.

react-dates · Apr 12, 2018 · 4157e98 · 4157e98
1 parent bec5af8
commit 4157e98
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 9 deletions.
diff --git a/src/utils/getDetachedContainerStyles.js b/src/utils/getDetachedContainerStyles.js
@@ -34,6 +34,6 @@ export default function getDetachedContainerStyles(openDirection, anchorDirectio
   }
 
   return {
-    transform: `translateX(${offsetX}px) translateY(${offsetY}px)`,
+    transform: `translate3d(${offsetX}px, ${offsetY}px, 0)`,
   };
 }
diff --git a/test/utils/getDetachedContainerStyles_spec.js b/test/utils/getDetachedContainerStyles_spec.js
@@ -32,26 +32,23 @@ describeIfNoWindow('#getDetachedContainerStyles', () => {
       describe('on down-left positioning', () => {
         it('returns translation from top-left of window to top-left of reference el', () => {
           const styles = getDetachedContainerStyles(OPEN_DOWN, ANCHOR_LEFT, referenceEl);
-          expect(styles.transform).to.have.string(`translateX(${referenceElRect.left}px)`);
-          expect(styles.transform).to.have.string(`translateY(${referenceElRect.top}px)`);
+          expect(styles.transform).to.equal(`translate3d(${referenceElRect.left}px, ${referenceElRect.top}px, 0)`);
         });
       });
 
       describe('on up-left positioning', () => {
         it('returns translation from bottom-left of window to bottom-left of reference el', () => {
           const styles = getDetachedContainerStyles(OPEN_UP, ANCHOR_LEFT, referenceEl);
           const offsetY = -(windowHeight - referenceElRect.bottom);
-          expect(styles.transform).to.have.string(`translateX(${referenceElRect.left}px)`);
-          expect(styles.transform).to.have.string(`translateY(${offsetY}px)`);
+          expect(styles.transform).to.equal(`translate3d(${referenceElRect.left}px, ${offsetY}px, 0)`);
         });
       });
 
       describe('on down-right positioning', () => {
         it('returns translation from top-right of window to top-right of reference el', () => {
           const styles = getDetachedContainerStyles(OPEN_DOWN, ANCHOR_RIGHT, referenceEl);
           const offsetX = -(windowWidth - referenceElRect.right);
-          expect(styles.transform).to.have.string(`translateX(${offsetX}px)`);
-          expect(styles.transform).to.have.string(`translateY(${referenceElRect.top}px)`);
+          expect(styles.transform).to.equal(`translate3d(${offsetX}px, ${referenceElRect.top}px, 0)`);
         });
       });
 
@@ -60,8 +57,7 @@ describeIfNoWindow('#getDetachedContainerStyles', () => {
           const styles = getDetachedContainerStyles(OPEN_UP, ANCHOR_RIGHT, referenceEl);
           const offsetX = -(windowWidth - referenceElRect.right);
           const offsetY = -(windowHeight - referenceElRect.bottom);
-          expect(styles.transform).to.have.string(`translateX(${offsetX}px)`);
-          expect(styles.transform).to.have.string(`translateY(${offsetY}px)`);
+          expect(styles.transform).to.equal(`translate3d(${offsetX}px, ${offsetY}px, 0)`);
         });
       });
     });