From: Daniel Ruf <d.ruf@bitexpert.de>
Date: Tue, 17 Dec 2019 13:21:50 +0000 (+0100)
Subject: fix: trigger reflow / layout thrashing - closes #11943
X-Git-Tag: v6.6.2^2~44^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F11944%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

fix: trigger reflow / layout thrashing - closes #11943
---

diff --git a/js/foundation.util.motion.js b/js/foundation.util.motion.js
index 07e760cb5..4bd3e1a47 100644
--- 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);