垂直菜单与 Masonry 的奇怪行为

Question

我正在尝试在列中的语义容器内使用砖石网格。我创建了一个简单的 fiddle here。由于比较多，就不post一一列举了，就我认为的问题所在：

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

一旦用户点击一个组，它将通过语义转换 'slide down' 切换可见或不可见。问题是一旦我在 onComplete Handler 砌体中告诉再次布局的向下滑动动画使内容变得不可见。 semantics 'slide down' 和 masonrys 'layout' 的动画都完成后，菜单不再可见。它以某种方式移开了并改变了它的大小。

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

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

Answer 1

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

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

垂直菜单与 Masonry 的奇怪行为

Vertical menu strange behaviour with Masonry

html

javascript

css

semantic-ui

masonry