在改变变焦（铬）时使用css过渡时出现黑色垂直线条

Question

我正在使用Angular4，我写了一个水平打开的简单菜单。出于不明原因，在不同的缩放比率下使用菜单“播放”一点时，我注意到关闭菜单后仍然留有一些黑色垂直线。如果我换到另一个窗口或再次改变缩放比例，那些线会消失，但我不明白他们为什么从一开始就在那里。

注意： 行为不一致。有时有线条，有时没有线条。如果有线条出现在不同的地方。在100％的规模上完全没有问题。

.menu-container {
  background-color: #5a5a5a;
  bottom: 23.81rem;
  left: 1.625rem;
  position: relative;
  transition: 0.5s;
}

.menu-content-hide {
  height: 0;
  width: 0;
}

.menu-content-show {
  height: 0;
  width: 36.06rem;
}

HTML

 <div class="menu-container"
           [ngClass]="{'menu-content-show': selectedItem, 'menu-content-hide': !selectedItem}">
        <app-menu-content (_onClose)="handleMenuClicked(null)" [_selectedItem]="selectedItem"></app-menu-content>
      </div>