在菜单中设置幻灯片动画时的Chrome z索引

Question

我正在尝试在类似于https://material.angular.io/components/sidenav/overview的sidenav的菜单中创建幻灯片，除非将其固定到窗口以便可以在任何地方打开。

在plnkr窗口中运行时，链接的plnkr可以正常工作。但在本地运行相同的代码无法正常工作。 https://plnkr.co/edit/f5zOlcf9hxlHZeu0BQiL

菜单中的幻灯片正确定位在页面其余部分的顶部，背景覆盖所有其他内容。但是当在Chrome中本地运行时，菜单和背景覆盖仅在动画完成后才会出现在前面。

看起来相对定位的元素会导致问题。使用简单的flex布局而不使用bootstrap时，元素在chrome中正确显示。滑块模板周围的div似乎可以解决chrome中的问题，但不确定原因。

If extensions.Contains(Song.Extension.ToLower()) Then
    ⋮
End If

我找到的一些资源是jQuery fadeIn on position:absolute causes z-index issue和https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context。

这是Chrome中的错误还是我对动画和z-index不理解的错误？