Merge pull request #92 from meandmax/add-detect-translate3d

fix(lory.js): detect translate3d and fall back to translate (e9 support)
loryjs · Nov 5, 2015 · 41460e5 · 41460e5
2 parents 070fe78 + bcb2e07
commit 41460e5
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 26 deletions.
diff --git a/demo/js/jquery.lory.js b/demo/js/jquery.lory.js
@@ -199,7 +199,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	        if (style) {
 	            style[prefixes.transition + 'TimingFunction'] = ease;
 	            style[prefixes.transition + 'Duration'] = duration + 'ms';
-	            style[prefixes.transform] = 'translate3d(' + to + 'px, 0, 0)';
+
+	            if (prefixes.hasTranslate3d) {
+	                style[prefixes.transform] = 'translate3d(' + to + 'px, 0, 0)';
+	            } else {
+	                style[prefixes.transform] = 'translate(' + to + 'px, 0)';
+	            }
 	        }
 	    }
 
@@ -602,7 +607,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 2 */
 /***/ function(module, exports) {
 
-	'use strict';
+	/* WEBPACK VAR INJECTION */(function(global) {'use strict';
 
 	Object.defineProperty(exports, "__esModule", {
 	    value: true
@@ -615,9 +620,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var transform = undefined;
 	    var transition = undefined;
 	    var transitionEnd = undefined;
+	    var hasTranslate3d = undefined;
 
 	    (function () {
-	        var style = document.createElement('_').style;
+	        var el = document.createElement('_');
+	        var style = el.style;
 
 	        var prop = undefined;
 
@@ -642,14 +649,21 @@ return /******/ (function(modules) { // webpackBootstrap
 	        if (style[prop = 'transform'] === '') {
 	            transform = prop;
 	        }
+
+	        document.body.insertBefore(el, null);
+	        style[transform] = 'translate3d(0, 0, 0)';
+	        hasTranslate3d = !!global.getComputedStyle(el).getPropertyValue(transform);
+	        document.body.removeChild(el);
 	    })();
 
 	    return {
 	        transform: transform,
 	        transition: transition,
-	        transitionEnd: transitionEnd
+	        transitionEnd: transitionEnd,
+	        hasTranslate3d: hasTranslate3d
 	    };
 	}
+	/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
 
 /***/ },
 /* 3 */

diff --git a/demo/js/jquery.lory.min.js b/demo/js/jquery.lory.min.js
diff --git a/demo/js/lory.js b/demo/js/lory.js
@@ -183,7 +183,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	        if (style) {
 	            style[prefixes.transition + 'TimingFunction'] = ease;
 	            style[prefixes.transition + 'Duration'] = duration + 'ms';
-	            style[prefixes.transform] = 'translate3d(' + to + 'px, 0, 0)';
+
+	            if (prefixes.hasTranslate3d) {
+	                style[prefixes.transform] = 'translate3d(' + to + 'px, 0, 0)';
+	            } else {
+	                style[prefixes.transform] = 'translate(' + to + 'px, 0)';
+	            }
 	        }
 	    }
 
@@ -586,7 +591,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 2 */
 /***/ function(module, exports) {
 
-	'use strict';
+	/* WEBPACK VAR INJECTION */(function(global) {'use strict';
 
 	Object.defineProperty(exports, "__esModule", {
 	    value: true
@@ -599,9 +604,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var transform = undefined;
 	    var transition = undefined;
 	    var transitionEnd = undefined;
+	    var hasTranslate3d = undefined;
 
 	    (function () {
-	        var style = document.createElement('_').style;
+	        var el = document.createElement('_');
+	        var style = el.style;
 
 	        var prop = undefined;
 
@@ -626,14 +633,21 @@ return /******/ (function(modules) { // webpackBootstrap
 	        if (style[prop = 'transform'] === '') {
 	            transform = prop;
 	        }
+
+	        document.body.insertBefore(el, null);
+	        style[transform] = 'translate3d(0, 0, 0)';
+	        hasTranslate3d = !!global.getComputedStyle(el).getPropertyValue(transform);
+	        document.body.removeChild(el);
 	    })();
 
 	    return {
 	        transform: transform,
 	        transition: transition,
-	        transitionEnd: transitionEnd
+	        transitionEnd: transitionEnd,
+	        hasTranslate3d: hasTranslate3d
 	    };
 	}
+	/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
 
 /***/ },
 /* 3 */