Reset transform fro safety

In case Modernizr reports that 3d transforms are
not supported (eg. if the implementation is buggy) but the
browser _does_ support it (at least partially).

Author: jsor

demo/demo.js

@@ -86,7 +86,7 @@
 
 
 	// module
-	exports.push([module.id, "body {\n  margin: 0;\n}\n.sliding-navigation {\n  -webkit-backface-visibility: hidden;\n  overflow: hidden;\n  position: relative;\n  max-width: 500px;\n  height: 100%;\n  background: #000;\n  font-family: sans-serif;\n}\n.sliding-navigation * {\n  -webkit-backface-visibility: hidden;\n}\n.sliding-navigation ul {\n  position: absolute;\n  top: 0;\n  left: 100%;\n  z-index: 2000;\n  display: none;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  width: 100%;\n  height: 100%;\n  transition: transform 350ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n.no-csstransforms3d .sliding-navigation ul {\n  transition: left 350ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n.sliding-navigation > ul {\n  left: 0;\n  display: block;\n}\n.sliding-navigation .sliding-navigation__parent {\n  transform: translate3d(-100%, 0, 0);\n  display: block;\n}\n.no-csstransforms3d .sliding-navigation .sliding-navigation__parent {\n  left: 0;\n}\n.no-csstransforms3d .sliding-navigation > .sliding-navigation__parent {\n  left: -100%;\n}\n.sliding-navigation .sliding-navigation__visible {\n  z-index: 2001;\n  display: block;\n}\n.sliding-navigation .sliding-navigation__scroll {\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.sliding-navigation li {\n  zoom: 1;\n}\n.sliding-navigation li:before,\n.sliding-navigation li:after {\n  content: \" \";\n  /* 1 */\n  display: table;\n  /* 2 */\n}\n.sliding-navigation li:after {\n  clear: both;\n}\n.sliding-navigation a {\n  display: block;\n  padding: 14px 20px;\n  color: #fff;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.sliding-navigation__open-button {\n  cursor: pointer;\n  padding: 0;\n  -webkit-appearance: none;\n  border: 0;\n  background: none;\n  outline: none;\n  text-shadow: none;\n  box-shadow: none;\n  text-align: left;\n  text-decoration: none;\n  color: inherit;\n  font: inherit;\n  position: relative;\n  z-index: 2999;\n  width: 48px;\n  height: 48px;\n  background: url(" + __webpack_require__(5) + ") 50% 50% no-repeat;\n  background-size: auto 16px;\n  float: right;\n  opacity: .5;\n}\n.sliding-navigation__open-button::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n.no-svg .sliding-navigation__open-button {\n  background-image: url(" + __webpack_require__(6) + ");\n}\n.sliding-navigation__open-button:hover {\n  opacity: 1;\n}\n.sliding-navigation__back {\n  padding: 0 10px;\n  background: rgba(255, 255, 255, 0.1);\n}\n.sliding-navigation__back-button {\n  cursor: pointer;\n  padding: 0;\n  -webkit-appearance: none;\n  border: 0;\n  background: none;\n  outline: none;\n  text-shadow: none;\n  box-shadow: none;\n  text-align: left;\n  text-decoration: none;\n  color: inherit;\n  font: inherit;\n  position: relative;\n  z-index: 2999;\n  text-indent: 24px;\n  width: 100%;\n  height: 48px;\n  background: url(" + __webpack_require__(7) + ") 0 50% no-repeat;\n  background-size: auto 16px;\n  color: #fff;\n}\n.sliding-navigation__back-button::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n.no-svg .sliding-navigation__back-button {\n  background-image: url(" + __webpack_require__(8) + ");\n}\n", ""]);
+	exports.push([module.id, "body {\n  margin: 0;\n}\n.sliding-navigation {\n  -webkit-backface-visibility: hidden;\n  overflow: hidden;\n  position: relative;\n  max-width: 500px;\n  height: 100%;\n  background: #000;\n  font-family: sans-serif;\n}\n.sliding-navigation * {\n  -webkit-backface-visibility: hidden;\n}\n.sliding-navigation ul {\n  position: absolute;\n  top: 0;\n  left: 100%;\n  z-index: 2000;\n  display: none;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  width: 100%;\n  height: 100%;\n  transition: transform 350ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n.no-csstransforms3d .sliding-navigation ul {\n  transition: left 350ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n.sliding-navigation > ul {\n  left: 0;\n  display: block;\n}\n.sliding-navigation .sliding-navigation__parent {\n  transform: translate3d(-100%, 0, 0);\n  display: block;\n}\n.no-csstransforms3d .sliding-navigation .sliding-navigation__parent {\n  transform: translate3d(0, 0, 0);\n  left: 0;\n}\n.no-csstransforms3d .sliding-navigation > .sliding-navigation__parent {\n  left: -100%;\n}\n.sliding-navigation .sliding-navigation__visible {\n  z-index: 2001;\n  display: block;\n}\n.sliding-navigation .sliding-navigation__scroll {\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.sliding-navigation li {\n  zoom: 1;\n}\n.sliding-navigation li:before,\n.sliding-navigation li:after {\n  content: \" \";\n  /* 1 */\n  display: table;\n  /* 2 */\n}\n.sliding-navigation li:after {\n  clear: both;\n}\n.sliding-navigation a {\n  display: block;\n  padding: 14px 20px;\n  color: #fff;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.sliding-navigation__open-button {\n  cursor: pointer;\n  padding: 0;\n  -webkit-appearance: none;\n  border: 0;\n  background: none;\n  outline: none;\n  text-shadow: none;\n  box-shadow: none;\n  text-align: left;\n  text-decoration: none;\n  color: inherit;\n  font: inherit;\n  position: relative;\n  z-index: 2999;\n  width: 48px;\n  height: 48px;\n  background: url(" + __webpack_require__(5) + ") 50% 50% no-repeat;\n  background-size: auto 16px;\n  float: right;\n  opacity: .5;\n}\n.sliding-navigation__open-button::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n.no-svg .sliding-navigation__open-button {\n  background-image: url(" + __webpack_require__(6) + ");\n}\n.sliding-navigation__open-button:hover {\n  opacity: 1;\n}\n.sliding-navigation__back {\n  padding: 0 10px;\n  background: rgba(255, 255, 255, 0.1);\n}\n.sliding-navigation__back-button {\n  cursor: pointer;\n  padding: 0;\n  -webkit-appearance: none;\n  border: 0;\n  background: none;\n  outline: none;\n  text-shadow: none;\n  box-shadow: none;\n  text-align: left;\n  text-decoration: none;\n  color: inherit;\n  font: inherit;\n  position: relative;\n  z-index: 2999;\n  text-indent: 24px;\n  width: 100%;\n  height: 48px;\n  background: url(" + __webpack_require__(7) + ") 0 50% no-repeat;\n  background-size: auto 16px;\n  color: #fff;\n}\n.sliding-navigation__back-button::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n.no-svg .sliding-navigation__back-button {\n  background-image: url(" + __webpack_require__(8) + ");\n}\n", ""]);
 
 	// exports
 

lib/mixins.less

@@ -54,6 +54,10 @@
         display: block;
 
         .no-csstransforms3d & {
+            // Reset transform in case Modernizr reports that 3d transforms are
+            // not supported (eg. if the implementation is buggy) but the
+            // browser _does_ support it (at least partially).
+            transform: translate3d(0, 0, 0);
             left: 0;
         }
     }