Race condition around topbar height

thetable commented 8 years ago

I have a very vanilla topbar, taken straight from the docs:

<html ng-app="topbartest">
<head>
  <title>Topbar height race condition</title>
  <script src="js/angular.js"></script>
  <script src="js/mm-foundation-tpls.js"></script>
  <script src="js/app.js"></script>
  <link rel="stylesheet" type="text/css" href="foundation.css" />
</head>
<body>

  <div ng-controller="AppCtrl as app">

    <top-bar>
      <ul class="title-area">
        <li class="name">
          <h1><a href="#">My Site</a></h1>
        </li>
        <li toggle-top-bar class="menu-icon"><a href="#">Menu</a></li>
      </ul>

      <top-bar-section>
        <!-- Right Nav Section -->
        <ul class="right">
          <li class="active"><a href="#">Active</a></li>
          <li has-dropdown>
            <a href="#">Dropdown</a>
            <ul top-bar-dropdown>
              <li><a href="#">First link in dropdown</a></li>
            </ul>
          </li>
        </ul>

        <!-- Left Nav Section -->
        <ul class="left">
          <li><a href="#">Left</a></li>
        </ul>
      </top-bar-section>
    </top-bar>

  </div>

</body>
</html>

Upon loading the page, the topbar sometimes renders correctly, other times, it has a height of 232px. I've been able to reproduce this in Safari 8.0.6 and Chrome 45 most recently (but more often in Safari) and Angular 1.3.3 and 1.4.4.

To see an example of the behavior, go to http://backin.de/foundationtopbar/ and reload the page a couple of times.

Another observation: If I serve the above set of files locally and only load mm-foundation-tpls.js from a CDN (so it presumably arrives after all the other files), the bug never appears.

I would be interested to hear if others can reproduce the bug and have theories on what might cause it.

thetable commented 8 years ago

Update: Appears to be caused by the watcher on scope.height (lines 2725ff):

scope.$watch('height', function(h) {
  if(h){
    topbar.css('height', h + 'px');
  } else {
    topbar.css('height', '');
  }
});

As far as I can tell, this simply inlines the height value from topbar[0].offsetHeight (line 2720), which is already wrong, so the wrong height isn't computed in the JavaScript.

jbrowning commented 8 years ago

Thanks for reporting @thetable. Interested in getting this fixed. Happy to accept a PR to fix if you'd like to send one in. Otherwise, I'll try to fix this weekend.

thetable commented 8 years ago

I will if I manage to understand what's actually causing this (or how to fix it). I assume I can't simply remove the scope.watch block, as it probably serves some purpose...

I can't even reproduce this in a plunkr rightnow, only in my self-hosted version. But let me know if it happens for you too. Still trying to figure out how mine is different from your topbar demo plunk.

daniel-seitz commented 8 years ago

Hello Gentlemen, do you have an update to this? We now have the same issue, interestingly there was no such phenomenon before we moved the html into an angular component.

yalabot / angular-foundation

Race condition around topbar height #257