Defer measuring of header elements to a timeout
authorTom Hughes <tom@compton.nu>
Thu, 14 Sep 2017 19:30:38 +0000 (20:30 +0100)
committerTom Hughes <tom@compton.nu>
Thu, 14 Sep 2017 19:30:38 +0000 (20:30 +0100)
Chrome 60 and later seem to fire the "ready" callback before the DOM is
fully ready causing us to measure the wrong sizes for the header elements
so we use a 0ms timeout to defer the measurement slightly as a workaround.

Fixes #1639

app/assets/javascripts/application.js

index 7d5b99f601e54ef8eacd9882c766a4305be356eb..7afbffb161bfb4bcffd30c67e5299b460f9282a0 100644 (file)
@@ -79,18 +79,6 @@ $(document).ready(function () {
   var headerWidth = 0,
       compactWidth = 0;
 
-  $("header").children(":visible").each(function (i,e) {
-    headerWidth = headerWidth + $(e).outerWidth();
-  });
-
-  $("body").addClass("compact");
-
-  $("header").children(":visible").each(function (i,e) {
-    compactWidth = compactWidth + $(e).outerWidth();
-  });
-
-  $("body").removeClass("compact");
-
   function updateHeader() {
     var windowWidth = $(window).width();
 
@@ -103,9 +91,29 @@ $(document).ready(function () {
     }
   }
 
-  updateHeader();
+  /*
+   * Chrome 60 and later seem to fire the "ready" callback
+   * before the DOM is fully ready causing us to measure the
+   * wrong sizes for the header elements - use a 0ms timeout
+   * to defer the measurement slightly as a workaround.
+   */
+  setTimeout(function () {
+    $("header").children(":visible").each(function (i,e) {
+      headerWidth = headerWidth + $(e).outerWidth();
+    });
+
+    $("body").addClass("compact");
+
+    $("header").children(":visible").each(function (i,e) {
+      compactWidth = compactWidth + $(e).outerWidth();
+    });
+
+    $("body").removeClass("compact");
+
+    updateHeader();
 
-  $(window).resize(updateHeader);
+    $(window).resize(updateHeader);
+  }, 0);
 
   $("#menu-icon").on("click", function(e) {
     e.preventDefault();