Fix zoom performance issue on chrome.

sachinchoolur · Dec 11, 2016 · cc97b3b · cc97b3b
1 parent 484fee6
commit cc97b3b
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 14 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "lightgallery",
-    "version": "1.3.6",
+    "version": "1.3.7",
     "description": "A lightweight, customizable, modular, responsive, lightbox gallery plugin for jQuery.",
     "main": [
         "dist/js/lightgallery.min.js",

diff --git a/dist/css/lg-fb-comment-box.css b/dist/css/lg-fb-comment-box.css
@@ -1,4 +1,4 @@
-/*! lightgallery - v1.3.6 - 2016-11-18
+/*! lightgallery - v1.3.7 - 2016-12-11
 * http://sachinchoolur.github.io/lightGallery/
 * Copyright (c) 2016 Sachin N; Licensed GPLv3 */
 .lg-outer.fb-comments .lg-img-wrap, .lg-outer.fb-comments .lg-video-cont {

diff --git a/dist/css/lg-transitions.css b/dist/css/lg-transitions.css
diff --git a/dist/css/lightgallery.css b/dist/css/lightgallery.css
@@ -1,4 +1,4 @@
-/*! lightgallery - v1.3.6 - 2016-11-18
+/*! lightgallery - v1.3.7 - 2016-12-11
 * http://sachinchoolur.github.io/lightGallery/
 * Copyright (c) 2016 Sachin N; Licensed GPLv3 */
 @font-face {
@@ -477,11 +477,19 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   -webkit-transition-duration: 0s;
   transition-duration: 0s;
 }
-.lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
+.lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
+  transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+.lg-outer.lg-use-left-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
   -webkit-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
   -moz-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
   -o-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
   transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+.lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-backface-visibility: hidden;
@@ -963,5 +971,3 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   -o-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
   transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
 }
-
-/*# sourceMappingURL=lightgallery.css.map */
diff --git a/dist/css/lightgallery.min.css b/dist/css/lightgallery.min.css
diff --git a/dist/js/lightgallery.js b/dist/js/lightgallery.js
@@ -1,4 +1,4 @@
-/*! lightgallery - v1.3.6 - 2016-11-18
+/*! lightgallery - v1.3.7 - 2016-12-11
 * http://sachinchoolur.github.io/lightGallery/
 * Copyright (c) 2016 Sachin N; Licensed GPLv3 */
 

diff --git a/dist/js/lightgallery.min.js b/dist/js/lightgallery.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "lightgallery",
-    "version": "1.3.6",
+    "version": "1.3.7",
     "description": "A lightweight, customizable, modular, responsive, lightbox gallery plugin for jQuery.",
     "keywords": [
         "jquery-plugin",

diff --git a/src/css/lightgallery.css b/src/css/lightgallery.css
diff --git a/src/css/lightgallery.css.map b/src/css/lightgallery.css.map
diff --git a/src/sass/lg-zoom.scss b/src/sass/lg-zoom.scss
@@ -7,11 +7,24 @@
             }
         }
     }
+    &.lg-use-transition-for-zoom {
+        .lg-item.lg-complete.lg-zoomable {
+            .lg-img-wrap {
+                @include transitionCustom(transform $zoom-transition-duration cubic-bezier(0, 0, 0.25, 1) 0s);
+            }
+        }
+    }
+    &.lg-use-left-for-zoom {
+        .lg-item.lg-complete.lg-zoomable {
+            .lg-img-wrap {
+                @include transitionCustom(left $zoom-transition-duration cubic-bezier(0, 0, 0.25, 1) 0s, top $zoom-transition-duration cubic-bezier(0, 0, 0.25, 1) 0s);
+            }
+        }
+    }
 
     .lg-item.lg-complete.lg-zoomable{
 
         .lg-img-wrap {
-            @include transitionCustom(left $zoom-transition-duration cubic-bezier(0, 0, 0.25, 1) 0s, top $zoom-transition-duration cubic-bezier(0, 0, 0.25, 1) 0s);
             @include translate3d(0, 0, 0);
             @include backface-visibility(hidden);
         }