砌体的垂直菜单奇怪行为

Question

我正在尝试在列中的语义容器内使用砌体网格。我创建了一个简单的小提琴 here。由于数量很多，我不会发布所有内容，只是我认为导致问题的原因：

HTML

<div class="ui top attached buttons padded grid">
  <div data-bind="click: expander" class="ui column button groupheader center aligned">
    <i class="caret down icon"></i>
    <span> Group 1 </span>
  </div>
</div>
<div class="container-responsive expander hidden">
  <table class="ui compact celled unstackable table">
    <thead>
      <tr>
        <th class="seven wide">Key</th>
        <th class="seven wide right aligned">Value</th>
      </tr>
    </thead>
    ...
</div>

Knockoutjs

self.expander = function(group, event){
  var nextExpander = $(event.currentTarget).parent().next('.expander');
  if (nextExpander.is(':visible')){
    nextExpander.transition({
      animation: 'slide down',
      duration: 400,
      onHide: function () {
        $('#masonry-grid').masonry('layout');        
      }
    });
  }
  else{
    nextExpander.transition('slide down', 400);
    $('#masonry-grid').masonry();
  }
}

一旦用户点击一个组，它就会通过语义转换“向下滑动”来切换可见或不可见。问题是一旦内容变得不可见，我在 onComplete Handler 砌体中告诉我再次布局的向下滑动动画。在两者的动画之后，语义“向下滑动”和砌体“布局”都完成了，菜单不再可见。它不知何故移开了，也改变了它的大小。

为了使问题发生，网格布局需要至少 1350 像素的宽度，否则它会按预期工作。
此外，如果砌体“布局”的动画被禁用，它会按预期工作。
如果砌体“布局”不必对组进行动画更改，则也不会出现问题（只需单击最后一个组，您就会看到）。

有人知道如何解决这个问题吗？

Answer 1

经过多次调试，我只能在 Chrome 中复制特定的错误。尝试将菜单项的 z-index 设置为 auto（目前由 semantic.min.css 设置为 101）。

.ui.menu.fixed {
    z-index: auto !important;
}