From: Tom Hughes <tom@compton.nu>
Date: Thu, 14 Sep 2017 19:30:38 +0000 (+0100)
Subject: Defer measuring of header elements to a timeout
X-Git-Tag: live~3285
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/47d33ed98ea63c3ebcdcd393d99e252b0416c627

Defer measuring of header elements to a timeout

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
---

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 7d5b99f60..7afbffb16 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -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();