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~4385
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/47d33ed98ea63c3ebcdcd393d99e252b0416c627?hp=715759211a96361ee7c01a341a3f2b6b236d5ebe

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();