Angular Material: Md-sidenav-right 和 md-tabs 在 IE 中不工作

Question

注意：这个问题只能在IE 11下才能看到。 IE Edge（包括仿真）不会显示该问题。

当我将 md-tabs 与 md-sidenav 结合使用时，我遇到了一个疯狂的问题。这是 plunkr:

http://embed.plnkr.co/if7VqrZoFKBJt4lAAoy0/

  <md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">

      <md-toolbar class="md-theme-light">
        <h1 class="md-toolbar-tools">Sidenav Right</h1>
      </md-toolbar>
      <md-content layout-padding="">
        <md-tabs>
          <md-tab label="Tab #1"></md-tab>
          <md-tab label="Tab #2"></md-tab>
          <md-tab label="Tab #3"></md-tab>
        </md-tabs>
      </md-content>

    </md-sidenav>

我复制了 2 个 sidenavs：一个使用 classmd-sidenav-left，另一个使用 md-sidenav-right。右边不允许选项卡或任何内容进行交互。

示例和我的实际代码使用的是 0.11.4，但我也测试了 1.0，它也有同样的问题。

有人运行解决过这个问题吗？ Materials 站点上的示例工作正常，但它不使用选项卡。我认为这是一个 translate3d css 问题，但无法确认。

Answer 1

原来他们的 css 试图搭载 md-sidenav-left 而不是创建新样式。

这是固定的 Plunker：

http://embed.plnkr.co/7L6GuUH036F2W9i7JPwl/

这是构建中的原始 SCSS：

.md-sidenav-right {
  left: 100%;
  top: 0;
  transform: translate3d(-100%, 0, 0);
  &.md-closed {
    transform: translate3d(0%, 0, 0);
  }
}

translate3d 和 left: 100% 结果是问题所在。它存在的原因是为了创建正确的动画。

这是更正后的 SCSS：

.md-sidenav-right {
  left: inherit;
  right: 0;
  transform: translate3d(0,0,0);
  &.md-closed {
    transform: translate3d(100%,0,0);
  } 
}

Angular Material: Md-sidenav-right 和 md-tabs 在 IE 中不工作

Angular Material: Md-sidenav-right with md-tabs not working in IE

css

angularjs

angular-material