Steps are now given the transform-style preserve-3d property along wi…

…th the canvas in supporting browsers
IanLunn · Apr 24, 2015 · d289ba3 · d289ba3
1 parent 0cf912f
commit d289ba3
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 16 deletions.
diff --git a/scripts/sequence.js b/scripts/sequence.js
@@ -958,19 +958,40 @@ function defineSequence(imagesLoaded, Hammer) {
           self.$screen.style.width = "100%";
         }
 
-        // if moveActiveStepToTop is enabled and the browser supports
-        // transform-style: preserve-3d, add this property to the canvas.
-        // This enables the use of transform: translateZ() in favor of z-index
-        // to work around a bug in iOS browsers
-        if (self.options.moveActiveStepToTop === true && self.propertySupport.transformStylePreserve3d === true) {
-          self.$canvas.style[Modernizr.prefixed("transformStyle")] = "preserve-3d";
-        }
+        self.canvas.addPreserve3d();
 
         // Determine the position of each step and the transform properties
         // required for the canvas so it can move to each step
         self.canvas.getTransformProperties();
       },
 
+      /**
+       * if moveActiveStepToTop is enabled and the browser supports
+       * transform-style: preserve-3d, add this property to the canvas and steps.
+       * This enables the use of transform: translateZ() in favor of z-index
+       * to work around a bug in iOS browsers
+       *
+       * @api private
+       */
+      addPreserve3d: function() {
+
+        if (self.options.moveActiveStepToTop === true && self.propertySupport.transformStylePreserve3d === true) {
+
+          var i,
+              $step;
+
+          // Add to the canvas
+          self.$canvas.style[Modernizr.prefixed("transformStyle")] = "preserve-3d";
+
+          // Add to the steps
+          for (i = 0; i < self.noOfSteps; i++) {
+
+            $step = self.$steps[i];
+            $step.style[Modernizr.prefixed("transformStyle")] = "preserve-3d";
+          }
+        }
+      },
+
       /**
        * Get Sequence's steps
        *

diff --git a/scripts/sequence.min.js b/scripts/sequence.min.js
diff --git a/scripts/sequence.min.map b/scripts/sequence.min.map
diff --git a/src/sequence.js b/src/sequence.js
@@ -958,19 +958,40 @@ function defineSequence(imagesLoaded, Hammer) {
           self.$screen.style.width = "100%";
         }
 
-        // if moveActiveStepToTop is enabled and the browser supports
-        // transform-style: preserve-3d, add this property to the canvas.
-        // This enables the use of transform: translateZ() in favor of z-index
-        // to work around a bug in iOS browsers
-        if (self.options.moveActiveStepToTop === true && self.propertySupport.transformStylePreserve3d === true) {
-          self.$canvas.style[Modernizr.prefixed("transformStyle")] = "preserve-3d";
-        }
+        self.canvas.addPreserve3d();
 
         // Determine the position of each step and the transform properties
         // required for the canvas so it can move to each step
         self.canvas.getTransformProperties();
       },
 
+      /**
+       * if moveActiveStepToTop is enabled and the browser supports
+       * transform-style: preserve-3d, add this property to the canvas and steps.
+       * This enables the use of transform: translateZ() in favor of z-index
+       * to work around a bug in iOS browsers
+       *
+       * @api private
+       */
+      addPreserve3d: function() {
+
+        if (self.options.moveActiveStepToTop === true && self.propertySupport.transformStylePreserve3d === true) {
+
+          var i,
+              $step;
+
+          // Add to the canvas
+          self.$canvas.style[Modernizr.prefixed("transformStyle")] = "preserve-3d";
+
+          // Add to the steps
+          for (i = 0; i < self.noOfSteps; i++) {
+
+            $step = self.$steps[i];
+            $step.style[Modernizr.prefixed("transformStyle")] = "preserve-3d";
+          }
+        }
+      },
+
       /**
        * Get Sequence's steps
        *