CSS-анимация перехода Jank W / Zindex на Mac (Retina)

Question

У нас есть веб-приложение Angular 4 с sidenav. При нажатии на значок гамбургера sidenav анимируется справа налево, давая ему ширину с помощью JS и переход через CSS, а div основного содержимого на заднем плане становится непрозрачным.

Проблема заключается в неуклюжей анимации открытия, джанк, при открытии и закрытии sidenav.

Пожалуйста, помните, что я все еще новичок в 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, то прозрачный к черному с непрозрачностью не появляется сверху, он укладывается ниже основного содержимого. Я перепробовал все, чтобы получить правильный стек (играя с zindex в div для разных сетей, добавляя позиционирование в CSS), но не уверен, что это проблема с Angular, или я что-то пропустил, или приведенный выше код просто плох. Если я удаляю zindex, анимация становится более плавной.

Кроме того, это более заметно на Mac с Google Chrome и Safari (еще более распространенным на экране сетчатки), в Firefox работает нормально, в Windows работает нормально.

Ждем любых отзывов!

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>

SASS:

#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... и джанк резко сократился.

.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;
}