Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Race condition around topbar height #257

Open
thetable opened this issue Sep 11, 2015 · 4 comments
Open

Race condition around topbar height #257

thetable opened this issue Sep 11, 2015 · 4 comments

Comments

@thetable
Copy link

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
Copy link
Author

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
Copy link
Member

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
Copy link
Author

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

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jbrowning @thetable @daniel-seitz