角度材质：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：一个使用类md-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); 
    } 
}