Fix zoom transition performance issues on chrome..

sachinchoolur · Dec 22, 2016 · dba206b · dba206b
1 parent 6901a84
commit dba206b
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 24 deletions.
diff --git a/dist/css/lightgallery.css b/dist/css/lightgallery.css
@@ -474,11 +474,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;

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,5 +1,5 @@
 /**!
- * lightgallery.js | 1.0.0 | October 5th 2016
+ * lightgallery.js | 1.0.1 | December 22nd 2016
  * http://sachinchoolur.github.io/lightgallery.js/
  * Copyright (c) 2016 Sachin N; 
  * @license 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.js",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Full featured lightbox gallery. Zero dependencies",
   "keywords": [
     "gallery",

diff --git a/src/css/lightgallery.css b/src/css/lightgallery.css
@@ -474,11 +474,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;

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);
         }

diff --git a/src/sass/prepros.cfg b/src/sass/prepros.cfg
@@ -272,7 +272,7 @@
         "f80b85a1": {
           "id": "f80b85a1",
           "path": "lightgallery.scss",
-          "output": "/Users/sachin/Public/my/lg/lightgallery.js/lightgallery/css/lightgallery.css",
+          "output": "C:/wamp/www/lg.js/lightgallery.js/src/css/lightgallery.css",
           "name": "lightgallery.scss",
           "category": "CSS",
           "autoCompile": true,
@@ -306,22 +306,6 @@
             "f80b85a1"
           ],
           "type": "sass"
-        },
-        "f2815610": {
-          "id": "f2815610",
-          "path": "C:/wamp/www/lightgallery-github/lightGallery/lightgallery/css/lightgallery.css",
-          "output": "C:/wamp/www/lightgallery-github/lightGallery/lightgallery/css/lightgallery-dist.css",
-          "name": "lightgallery.css",
-          "category": "CSS",
-          "autoCompile": false,
-          "sourceMaps": false,
-          "compress": true,
-          "cssnext": false,
-          "autoprefixer": false,
-          "customOutput": false,
-          "imported": false,
-          "parents": [],
-          "type": "css"
         }
       },
       "deploymentHistory": {},