Use translate3d to get hw-acccerlation on iOS

SectorLabs · Oct 16, 2017 · 794b677 · 794b677
1 parent 7ac60c6
commit 794b677
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/build/image-gallery.js b/build/image-gallery.js
@@ -743,7 +743,7 @@ var ImageGallery = function (_React$Component) {
         translateX = this._getTranslateXForTwoSlide(index);
       }
 
-      var translate = 'translate(' + translateX + '%, 0)';
+      var translate = 'translate3d(' + translateX + '%, 0, 0)';
 
       return {
         WebkitTransform: translate,
@@ -759,9 +759,9 @@ var ImageGallery = function (_React$Component) {
       var translate = void 0;
 
       if (this._isThumbnailHorizontal()) {
-        translate = 'translate(0, ' + this.state.thumbsTranslate + 'px)';
+        translate = 'translate3d(0, ' + this.state.thumbsTranslate + 'px, 0)';
       } else {
-        translate = 'translate(' + this.state.thumbsTranslate + 'px, 0)';
+        translate = 'translate3d(' + this.state.thumbsTranslate + 'px, 0, 0)';
       }
       return {
         WebkitTransform: translate,

diff --git a/src/ImageGallery.jsx b/src/ImageGallery.jsx
@@ -763,7 +763,7 @@ export default class ImageGallery extends React.Component {
       translateX = this._getTranslateXForTwoSlide(index);
     }
 
-    const translate = `translate(${translateX}%, 0)`;
+    const translate = `translate3d(${translateX}%, 0, 0)`;
 
     return {
       WebkitTransform: translate,
@@ -778,9 +778,9 @@ export default class ImageGallery extends React.Component {
     let translate;
 
     if (this._isThumbnailHorizontal()) {
-      translate = `translate(0, ${this.state.thumbsTranslate}px)`;
+      translate = `translate3d(0, ${this.state.thumbsTranslate}px, 0)`;
     } else {
-      translate = `translate(${this.state.thumbsTranslate}px, 0)`;
+      translate = `translate3d(${this.state.thumbsTranslate}px, 0, 0)`;
     }
     return {
       WebkitTransform: translate,