fix: trigger reflow / layout thrashing - closes #11943

diff --git a/js/foundation.util.motion.js b/js/foundation.util.motion.js
index 07e760cb5bb02014428f848f2d5d2c0e25d40a13..4bd3e1a47d8967da5712cfd909667533132e095b 100644 (file)
--- a/js/foundation.util.motion.js
+++ b/js/foundation.util.motion.js
@@ -77,6 +77,10 @@ function animate(isIn, element, animation, cb) {
 
   // Start the animation
   requestAnimationFrame(() => {
+    // will trigger the browser to synchronously calculate the style and layout
+    // also called reflow or layout thrashing
+    // see https://gist.github.com/paulirish/5d52fb081b3570c81e3a
+    element[0].offsetWidth;
     element
       .css('transition', '')
       .addClass(activeClass);