Mac上的CSS过渡动画Jank w/zindex (Retina)

Question

我们有一个带有sidenav的Angular 4 web应用程序。当点击汉堡包图标时，sidenav通过JS给它一个宽度并通过CSS给它一个过渡，从右到左的动画打开，背景中的主要内容div被褪色为不透明的黑色。

问题是在sidenav的开场和闭幕上笨拙的开场动画jank。

请不要忘记，我对Angular还是个新手。代码是：

public openNav() {
    let offCanvas = document.getElementById('off-canvas-menu');
    let container = document.getElementById('main-wrapper-container');
    let openIndex = document.getElementById('main-view-container');

    offCanvas.style.width = "250px";
    openIndex.style.zIndex = '-1';

    setTimeout(function() {container.style.background = "rgba(0,0,0,0.4)"}, 200);

}

public closeNav() {
    document.getElementById('off-canvas-menu').style.width = "0";
    document.getElementById('main-wrapper-container').style.background = "inherit";
    let closeIndex = document.getElementById('main-view-container');
    setTimeout(function() { closeIndex.style.zIndex = 'auto'}, 300);
}

我之所以用zindex设置它，是因为其他组件的视图似乎有问题。如果我去掉zindex，那么透明的带不透明的黑色不会显示在顶部，它堆叠在主要内容的下面。我已经尝试了所有方法来实现正确的堆栈(在不同的div中使用zindex，在CSS中添加位置)，但不确定这是Angular的问题还是我遗漏了什么，或者上面的代码是不是很糟糕。如果我去掉zindex，动画会更流畅。

此外，这一点在搭载谷歌Chrome和Safari (在视网膜屏幕上更常见)的Mac上更加明显，在Firefox works ok上，在Windows works ok上。

期待您的反馈！

HTML：

<span (click)="openNav()" id="open-off-canvas-menu-button" *ngIf="is_there_session()">
    <i class="fa fa-bars" aria-hidden="true"></i>
</span>

<div id="main-wrapper-container" (click)="closeNav()">
  <div id="main-view-container">
    <router-outlet></router-outlet>
  </div>
</div>

萨斯：

#open-off-canvas-menu-button{
    position: fixed;
    top: 0;
    right:0;
    padding: 25px 18px 0 0;
    z-index: 500;
    i{
        display: inline-block;
        color: $gray-forty;
        transition: color 500ms ease-in-out;
        font-size: 18px;
    }

    &:hover {
        cursor: pointer;
    }
}


.off-canvas-menu {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    right: 0;
    background-color: $black;
    overflow-x: hidden;
    padding-top: 60px;
    @include transition(all .5s ease);
    z-index: 1000;
}

.off-canvas-menu a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 1.5rem;
    color: $gray-forty;
    display: block;
    width: 300px;
    @include transition(all .5s ease);
    &:hover {
        cursor: pointer;
    }
}

.off-canvas-menu a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.off-canvas-menu .closebtn {
    position: absolute;
    top: 5px;
    transform: translateX(60%);
    font-size: 36px;
}

#main-wrapper-container {
    position: relative;
    height: 100%;
    min-height: 100vh;
    width: 100%;
    @include transition(all .4s ease);
}

#main-view-container {
    position: relative;
}

Answer 1

相当简单，我只是从增加侧边导航的宽度改为使用ScaleX...而且jank也大大减少了。

.off-canvas-menu {
    height: 100%;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    width: 250px;
    position: fixed;
    top: 0;
    right: 0;
    background-color: $black;
    overflow-x: hidden;
    padding-top: 60px;
    @include transition(all .5s ease);
    z-index: 1000;
}