Fix zoom transition performance issues on chrome..

lexuspro · Dec 22, 2016 · c931ad9 · c931ad9
1 parent dba206b
commit c931ad9
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 12 deletions.
diff --git a/demo/js/lg-zoom.js b/demo/js/lg-zoom.js
@@ -1,5 +1,5 @@
 /**!
- * lg-zoom.js | 1.0.0 | October 5th 2016
+ * lg-zoom.js | 1.0.1 | December 22nd 2016
  * http://sachinchoolur.github.io/lg-zoom.js
  * Copyright (c) 2016 Sachin N; 
  * @license GPLv3 
@@ -33,11 +33,22 @@
         return target;
     };
 
+    var getUseLeft = function getUseLeft() {
+        var useLeft = false;
+        var isChrome = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
+        if (isChrome && parseInt(isChrome[2], 10) < 54) {
+            useLeft = true;
+        }
+
+        return useLeft;
+    };
+
     var zoomDefaults = {
         scale: 1,
         zoom: true,
         actualSize: true,
-        enableZoomAfter: 300
+        enableZoomAfter: 300,
+        useLeftForZoom: getUseLeft()
     };
 
     var Zoom = function Zoom(element) {
@@ -70,6 +81,12 @@
             zoomIcons += '<span id="lg-actual-size" class="lg-icon"></span>';
         }
 
+        if (_this.core.s.useLeftForZoom) {
+            utils.addClass(_this.core.outer, 'lg-use-left-for-zoom');
+        } else {
+            utils.addClass(_this.core.outer, 'lg-use-transition-for-zoom');
+        }
+
         this.core.outer.querySelector('.lg-toolbar').insertAdjacentHTML('beforeend', zoomIcons);
 
         // Add zoomable class
@@ -120,8 +137,13 @@
             utils.setVendor(image, 'Transform', 'scale3d(' + scaleVal + ', ' + scaleVal + ', 1)');
             image.setAttribute('data-scale', scaleVal);
 
-            image.parentElement.style.left = -x + 'px';
-            image.parentElement.style.top = -y + 'px';
+            if (_this.core.s.useLeftForZoom) {
+                image.parentElement.style.left = -x + 'px';
+                image.parentElement.style.top = -y + 'px';
+            } else {
+                utils.setVendor(image.parentElement, 'Transform', 'translate3d(-' + x + 'px, -' + y + 'px, 0)');
+            }
+
             image.parentElement.setAttribute('data-x', x);
             image.parentElement.setAttribute('data-y', y);
         };
@@ -340,8 +362,13 @@
                     }
 
                     if (Math.abs(endCoords.x - startCoords.x) > 15 || Math.abs(endCoords.y - startCoords.y) > 15) {
-                        _el.style.left = distanceX + 'px';
-                        _el.style.top = distanceY + 'px';
+
+                        if (_this.core.s.useLeftForZoom) {
+                            _el.style.left = distanceX + 'px';
+                            _el.style.top = distanceY + 'px';
+                        } else {
+                            utils.setVendor(_el, 'Transform', 'translate3d(' + distanceX + 'px, ' + distanceY + 'px, 0)');
+                        }
                     }
                 }
             });
@@ -435,8 +462,12 @@
                     distanceX = -Math.abs(_el.getAttribute('data-x'));
                 }
 
-                _el.style.left = distanceX + 'px';
-                _el.style.top = distanceY + 'px';
+                if (_this.core.s.useLeftForZoom) {
+                    _el.style.left = distanceX + 'px';
+                    _el.style.top = distanceY + 'px';
+                } else {
+                    utils.setVendor(_el, 'Transform', 'translate3d(' + distanceX + 'px, ' + distanceY + 'px, 0)');
+                }
             }
         });
 
@@ -504,8 +535,12 @@
                 distanceX = -Math.abs(_el.getAttribute('data-x'));
             }
 
-            _el.style.left = distanceX + 'px';
-            _el.style.top = distanceY + 'px';
+            if (_this.core.s.useLeftForZoom) {
+                _el.style.left = distanceX + 'px';
+                _el.style.top = distanceY + 'px';
+            } else {
+                utils.setVendor(_el, 'Transform', 'translate3d(' + distanceX + 'px, ' + distanceY + 'px, 0)');
+            }
         }
     };