Added timeout to resizeThrottle

takint · Apr 22, 2015 · 06d96f5 · 06d96f5
1 parent b696c3f
commit 06d96f5
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 28 deletions.
diff --git a/scripts/sequence.js b/scripts/sequence.js
@@ -3297,20 +3297,24 @@ function defineSequence(imagesLoaded, Hammer) {
           // Events to be executed when the throttled window resize occurs
           function throttledEvents() {
 
-            self.canvas.getTransformProperties();
+            // Use a delay to give the browser a chance to repaint before
+            // getting transform properties
+            setTimeout(function() {
+              self.canvas.getTransformProperties();
 
-            /**
-             * Snap to the currently active step
-             *
-             * Assume the canvas is laid out in a 2 x 2 grid, the Sequence
-             * element has a height of 100%, and the user is viewing the second
-             * row of steps -- when the user resizes the window, the second row
-             * of steps will no longer be positioned perfectly in the window.
-             * This event will immediately snap the canvas back into place.
-             */
-            if (self.propertySupport.transitions === true) {
-              self.canvas.move(self.currentStepId, false);
-            }
+              /**
+               * Snap to the currently active step
+               *
+               * Assume the canvas is laid out in a 2 x 2 grid, the Sequence
+               * element has a height of 100%, and the user is viewing the second
+               * row of steps -- when the user resizes the window, the second row
+               * of steps will no longer be positioned perfectly in the window.
+               * This event will immediately snap the canvas back into place.
+               */
+              if (self.propertySupport.transitions === true) {
+                self.canvas.move(self.currentStepId, false);
+              }
+            }, 500);
 
             // Callback
             self.throttledResize(self);

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
@@ -3297,20 +3297,24 @@ function defineSequence(imagesLoaded, Hammer) {
           // Events to be executed when the throttled window resize occurs
           function throttledEvents() {
 
-            self.canvas.getTransformProperties();
+            // Use a delay to give the browser a chance to repaint before
+            // getting transform properties
+            setTimeout(function() {
+              self.canvas.getTransformProperties();
 
-            /**
-             * Snap to the currently active step
-             *
-             * Assume the canvas is laid out in a 2 x 2 grid, the Sequence
-             * element has a height of 100%, and the user is viewing the second
-             * row of steps -- when the user resizes the window, the second row
-             * of steps will no longer be positioned perfectly in the window.
-             * This event will immediately snap the canvas back into place.
-             */
-            if (self.propertySupport.transitions === true) {
-              self.canvas.move(self.currentStepId, false);
-            }
+              /**
+               * Snap to the currently active step
+               *
+               * Assume the canvas is laid out in a 2 x 2 grid, the Sequence
+               * element has a height of 100%, and the user is viewing the second
+               * row of steps -- when the user resizes the window, the second row
+               * of steps will no longer be positioned perfectly in the window.
+               * This event will immediately snap the canvas back into place.
+               */
+              if (self.propertySupport.transitions === true) {
+                self.canvas.move(self.currentStepId, false);
+              }
+            }, 500);
 
             // Callback
             self.throttledResize(self);